Comment faire pour afficher uniquement le texte en datalist HTML5 et pas de la valeur?

Voici un exemple:

<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>

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

Ce que je veux atteindre, c'est quand je clique sur l'élément d'entrée de la valeur ne serait pas affiché, mais SEULEMENT la texte (c'est à dire 1, 2, 3, 4, 5). I. e. la valeur doit être caché comme c'est une liste déroulante (<select> élément).

Cette fonctionnalité saisie semi-automatique est nécessaire, sinon je serais allé à la normale de la liste déroulante.

  • Vous pouvez déplacer value à un autre paramètre (par exemple, data-value) et de définir 1,2,3,4,5 comme value.
  • Mais j'ai besoin d'envoyer la valeur à l'extrémité arrière à l'aide de jquery.
  • Vous pouvez envoyer data-value au lieu de value
  • Et je viens de remarquer que la valeur n'est pas lu
  • Et u peut me dire comment faire pour envoyer les données de la valeur, je utiliser - $("#navigateurs").val()
  • vérifiez ce violon, la vôtre, mais Modifiée http://jsfiddle.net/Lfgknh78/
  • U avez supprimé le texte complètement et le tyoe de texte est de montrer une erreur
  • Jetez un oeil à mise à jour de violon.
  • dernière violon jsfiddle.net/yy7j0xLy
  • Je l'ai eu pour afficher la ctext dans la liste déroulante. Pas la valeur.

InformationsquelleAutor Cerebus1504 | 2014-09-02
  1. 22

    É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/

    • Comment faire pour récupérer la valeur et de l'envoyer plus tôt, j'ai utilisé de type $("#navigateurs").val().
    • Eh bien, peut-être violon à partir de ma question, du commentaire doit être ajouté à répondre de ses exhaustivité
    • Ok je vais essayer je ne suis pas à l'obtenir
    • est-il possible de ne pas mentionner les données de la valeur et il le prend de façon dynamique comme nous choisir ?
    • que voulez-vous dire? Nous prenons data-value de façon dynamique en fonction value nous avons choisi. @guest271314, j'espère que la réponse est désormais suffisant pour l'OP. Au moins j'ai voté jusqu'.
    • Merci les gars, eu 🙂
    • le "$('#navigateurs [value="' + valeur + '"]').de données('value')"-partie a fait le tour entier pour mon problème 🙂

    InformationsquelleAutor guest271314
  2. 1

    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.

    InformationsquelleAutor Oliver