Comment afficher le texte dans datalist html5 et non pas la valeur

<!DOCTYPE html>
<html>
<body>

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">1</option>
  <option value="Firefox">2</option>
  <option value="Chrome">3</option>
  <option value="Opera">4</option>
  <option value="Safari">5</option>
</datalist>
<input type="submit">
</form>

</body>
</html>

http://jsfiddle.net/j7ehtqjd/1/

J'ai joint un violon. Veuillez vérifier.
La solution que je souhaite obtenir, c'est quand je clique sur la liste déroulante la valeur est affichée, mais je veux que le texte 1,2,3,4,5 pour être affiché. J'ai utiliser une réponse json pour mon problème actuel.Seul le texte doit être affiché et la valeur doit être caché comme un général liste déroulante. Cette fonctionnalité saisie semi-automatique est nécessaire, sinon je serais allé à la normale de la liste déroulante.

source d'informationauteur Cerebus1504

  1. 19

    Édition, mise à jour

    Suivantes Régent

    Essayer (v3)

    html

    <input id="selected" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="InternetExplorer" value="1"></option>
    <option data-value="Firefox" value="2"></option>
    <option data-value="Chrome" value="3"></option>
    <option data-value="Opera" value="4"></option>
    <option data-value="Safari" value="5"></option>
</datalist>
<input id="submit" type="submit">

    js

    $(document).ready(function() {

var data = {}; 
$("#browsers option").each(function(i,el) {  
   data[$(el).data("value")] = $(el).val();
});
//`data` : object of `data-value` : `value`
console.log(data, $("#browsers option").val());


    $('#submit').click(function()
    {
        var value = $('#selected').val();
        alert($('#browsers [value="' + value + '"]').data('value'));
    });
});

    jsfiddle http://jsfiddle.net/guest271314/j7ehtqjd/13/

  2. 0

    Un très salissant méthode pour faire cela sans dépendances comme jQuery (edit: je me rends compte que jQuery est utilisé par l'OP, mais cette méthode permettra de s'intégrer amende avec ou sans jQuery, pourrait aider d'autres personnes qui ne sont pas).

    Tout d'abord, swap votre valeur et les nœuds de texte autour, comme suit:

    <input list="browsers" name="browser" id="my_input">
  <datalist id="browsers">
    <option value="Internet Explorer">1</option>
    <option value="Firefox">2</option>
    <option value="Chrome">3</option>
    <option value="Opera">4</option>
    <option value="Safari">5</option>
  </datalist>
  <input type="submit">

    Cela garantit que les données d'entrée indique toujours la valeur correcte pour l'utilisateur. Puis ajouter un peu de JavaScript pour vérifier le texte du nœud de la valeur correspondante, comme suit:

    let $input = document.getElementById('my_input');
let $datalist = document.getElementById('browsers');

$input.addEventListener('change', () => {
  let _value = null;

  let input_value = $input.value;
  let options = $datalist.children;
  let i = options.length;

  while(i--) {
    let option = options[i];

    if(option.value == input_value) {
      _value = option.textContent;
      break;
    }
  }

  if(_value == null) {
    console.warn('Value does not exist');
    return false;
  }

  console.log('The value is:', _value );
});

    Vous pouvez également modifier la 'change' écouteur d'événement à 'keyup' trop, d'obtenir une rétroaction en temps réel. Et au lieu de console.log('The value is:', _value ) vous pouvez simplement ajouter une hidden entrée pour enregistrer la valeur, vous permettant ainsi d'envoyer à la fois la valeur et l'id.

    Cette moderne utilise JavaScript notation, mais de le rendre compatible juste besoin de changer la 'change', () => { appel à 'change', function() { et changement let à var.