Boîte combo HTML avec possibilité de taper une entrée

Question

J'avais l'impression que l'on pouvait taper dans une boîte combo en plus de sélectionner les valeurs déjà présentes dans la liste. Cependant, je n'arrive pas à trouver d'informations sur la façon de le faire. Y a-t-il une propriété que je dois ajouter pour permettre la saisie de texte ?

Answer 1

Avant datalist (voir la remarque ci-dessous), vous devez fournir un supplément de input élément permettant aux personnes de saisir leur propre option.

<select name="example">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="-">Other</option>
</select>

<input type="text" name="other">

Ce mécanisme fonctionne dans tous les navigateurs et ne nécessite pas de JavaScript .

Vous pouvez utiliser un peu de JavaScript pour ne montrer que les éléments suivants input si l'option "Autre" a été sélectionnée.

élément datalist

En datalist est destiné à fournir un meilleur mécanisme pour ce concept. Dans certains navigateurs, par exemple iOS Safari < 12.2, cela n'était pas pris en charge ou l'implémentation présentait des problèmes. Consultez la page "Puis-je utiliser" pour connaître le support actuel des listes de données. .

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">  
  <option value="B">
</datalist>

Answer 2

En HTML, vous le faites à l'envers : Vous définissez une entrée de texte :

<input type="text" list="browsers" />

et y attacher une liste de données. (notez l'attribut liste de l'entrée).

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Answer 3

Ce lien peut vous aider : http://www.scriptol.com/html5/combobox.php

Vous avez deux exemples. L'un en html4 et l'autre en html5

HTML5

<input type="text" list="browsers"/>
 <datalist id="browsers">
    <option>Google</option>
    <option>IE9</option>
 </datalist>

HTML4

 <input type="text" id="theinput" name="theinput" />
 <select name="thelist" onChange="combo(this, 'theinput')">
   <option>one</option>
   <option>two</option>
   <option>three</option>
 </select>

 function combo(thelist, theinput) {
     theinput = document.getElementById(theinput);
     var idx = thelist.selectedIndex;
     var content = thelist.options[idx].innerHTML;
     theinput.value = content;
 }

Answer 4

En dojo exemple ici ne fonctionnent pas lorsqu'ils sont appliqués au code existant dans la plupart des cas. J'ai donc dû trouver une alternative, trouvée ici - hxxp://technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (pointe maintenant vers un site de spam ou pire)

archive.org (pas très utile)

Voici le jsfiddle - https://jsfiddle.net/ze7fgby7/

Answer 5

Eh bien, nous sommes en 2016 et il n'y a toujours pas de moyen facile de faire un combo ... bien sûr, nous avons datalist mais sans support safari/ios il n'est pas vraiment utilisable. Au moins nous avons ES6 ... ci-dessous est une tentative d'une classe combo qui enveloppe un div ou span, le transformant en un combo en mettant une boîte de saisie sur le dessus de select et liant les événements pertinents.

voir le code à : https://github.com/kofifus/Combo

(le code s'appuie sur le modèle de classe de https://github.com/kofifus/New )

Créer un combo est facile ! Il suffit de passer un div à son constructeur :

let mycombo=Combo.New(document.getElementById('myCombo'));
mycombo.options(['first', 'second', 'third']);

mycombo.onchange=function(e, combo) {
  let val=combo.value;
  // let val=this.value; // same as above
  alert(val);
 }

<script src="https://rawgit.com/kofifus/New/master/new.min.js"></script>
<script src="https://rawgit.com/kofifus/Combo/master/combo.min.js"></script>

<div id="myCombo" style="width:100px;height:20px;"></div>