web-dev-qa-db-fra.com

Définition de valeurs d'options de datalist masquées

Dans l'extrait ci-dessous, j'ai deux méthodes pour choisir un élément: l'entrée avec datalist et la sélection traditionnelle avec options.

L'élément select garde les valeurs d'options masquées et nous pouvons toujours l'obtenir avec this.value. Cependant, avec le datalist, la valeur est réellement affichée et le contenu textuel de l'option est affiché comme une étiquette secondaire.

Ce que j'aimerais, c'est que l'approche input + datalist se comporte comme une sélection traditionnelle, où "Foo" et "Bar" sont affichés comme des options qui, lorsqu'elles sont sélectionnées, ont les valeurs "1" et "2" respectivement.

J'ai également ajouté un nom répété "Foo" avec la valeur "3". Cela montre que toute solution ne doit pas dépendre d'options uniques.

<input list="options" onchange="console.log(this.value)"/>
<datalist id="options">
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

<select onchange="console.log(this.value)">
  <option value=""></option>
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</select>

htmlhtml5html-selecthtml-datalist
9
Rick Viscomi

Il n'y a pas de chemin indigène. Pour entrées de texte

Le input element représente un texte brut d'une ligne d'édition contrôle pour la valeur de l'élément .

Il est donc impossible de faire en sorte que la saisie de texte affiche du texte différent de sa valeur.

Vous pouvez pirater le getter value dans HTMLInputElement.prototype, mais je ne le recommande pas et je ne vois aucun moyen de savoir quelle option a été choisie si les valeurs ne sont pas uniques.

var des = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(HTMLInputElement.prototype, 'value', { get: function() {
  if(this.type === 'text' && this.list) {
    var value = des.get.call(this);
    var opt = [].find.call(this.list.options, function(option) {
      return option.value === value;
    });
    return opt ? opt.dataset.value : value;
  }
}});
<input list="options" oninput="console.log(this.value);" />
<datalist id="options">
  <option data-value="1">Foo</option>
  <option data-value="2">Bar</option>
  <option data-value="3">Foo</option>
</datalist>

Vous pouvez également laisser l’entrée afficher la valeur de l’option au lieu du texte, mais la remplacer immédiatement:

var inp = document.querySelector('input');
inp.addEventListener('input', function() {
  var value = this.value;
  var opt = [].find.call(this.list.options, function(option) {
    return option.value === value;
  });
  if(opt) {
    this.value = opt.textContent;
  }
});
<input list="options" oninput="console.log(this.value);" />
<datalist id="options">
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

Dans le deuxième exemple, oninput="console.log(this.value)" affiche la valeur de l'option car ce code s'exécute avant de remplacer la valeur par le contenu du texte. Si vous souhaitez que les accès .value ultérieurs renvoient la valeur de l’option, vous devrez détourner le getter value comme dans le premier exemple.

3
Oriol

La syntaxe correcte de datalist est comme ci-dessous. En outre, il est inutile d'avoir deux options avec le même nom. J'ai sorti le code HTML du code HTML comme il se doit. L'attribut ID des options individuelles peut être remplacé par un autre attribut.

$(function() {
  $('input[name=chooseOption]').on('input',function() {
    var selectedOption = $('option[value="'+$(this).val()+'"]');
    console.log(selectedOption.length ? selectedOption.attr('id') : 'This opiton is not in the list!');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="options" name="chooseOption">
<datalist id="options">
  <option id="1" value="Foo">
  <option id="2" value="Bar">
  <option id="3" value="Foo">
</datalist>

0
Stoycho Trenchev

Je ne sais pas que cela vous aidera, venez d'essayer

  <input list="options" id="opt" oninput="onInput()">
  <datalist id="options">
        <option value="1">Foo</option>
       <option value="2">Bar</option>
       <option value="3">Foo</option> 
        <option value="4">Foo</option>
       <option value="5">Bar</option>
       <option value="6">Foo</option> 
  </datalist>




 $( document ).ready(function() {              
         var x =  document.getElementById("options");
           for (i = 0; i < x.length; i++)
            alert(x.options[i].value);     


            $("#opt").click(function(){
                 $("#opt").val("");});                   
             });

     function onInput() {
            var val = document.getElementById("opt").value;
            var opts = document.getElementById('options').childNodes;
             for (var i = 0; i < opts.length; i++) {
                    if (opts[i].value === val) {                
                    document.getElementById("opt").value = opts[i].value + "   "+ opts[i].innerHTML;
                    break;
                  }
                }
              }
0
Sun_Sparxz

Vous pouvez utiliser data-value et jquery pour masquer votre valeur.

par exemple:

$(document).ready(function() {

    $('#submit').click(function()
    {
        var value = $('#selected').val();
        alert($('#browsers [value="' + value + '"]').data('value'));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="selected" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="1" value="InternetExplorer"></option>
    <option data-value="2" value="Firefox"></option>
    <option data-value="3" value="Chrome"></option>

</datalist>
<input id="submit" type="submit">

jsfiddle

Merci à @ guest271314

0
HybrisHelp