web-dev-qa-db-fra.com

Zone de liste déroulante HTML avec possibilité de saisir une entrée

J'avais l'impression que vous pouviez taper dans une liste déroulante 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 procéder. Dois-je ajouter une propriété pour permettre la saisie de texte?

htmlcombobox
68
birdus

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

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

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

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

Vous pouvez utiliser un peu de JavaScript pour être malin et ne montrer que la input si l'option "Autre" est sélectionnée.

élément datalist

L'élément datalist est destiné à fournir un meilleur mécanisme pour ce concept. Point important, Safari, iOS Safari ou Opera Mini ne sont pas pris en charge. La mise en œuvre d’Internet Explorer pose également certains problèmes. Cette information sera périmée, alors vérifiez Puis-je utiliser pour voir le support actuel de datalist pour des informations plus récentes.

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

en HTML, vous procédez de la manière inverse: vous définissez une entrée de texte et y attachez un datalist. (notez l'attribut de liste de l'entrée).

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

<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
55
Kristóf Szalay

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

Vous avez deux exemples. Un en html4 et un 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;
 }
22
Celso Soares

L'exemple dojo ici ne fonctionne pas lorsqu'il est appliqué au code existant dans la plupart des cas. Par conséquent, je devais trouver un remplaçant, trouvé ici. )

archive.org (pas très utile)

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

6
PeakGen

Eh bien, nous sommes en 2016 et il n’existe toujours pas de moyen facile de faire un combo ... certes, nous avons datalist, mais sans support safari/ios, ce n’est pas vraiment utilisable. Au moins, nous avons ES6. Nous présentons ci-dessous une tentative de classe combo qui enveloppe une division ou une étendue, la transformant en combo en plaçant une zone de saisie au-dessus de select et en liant les événements pertinents.

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

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

Créer un combo est facile! il suffit de passer une 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>
4
kofifus

Celui-ci est beaucoup plus petit, ne nécessite pas jquery et fonctionne mieux en safari. https://github.com/Fyrd/purejs-datalist-polyfill/

Vérifiez les problèmes pour la modification pour ajouter un downarrow. https://github.com/Fyrd/purejs-datalist-polyfill/issues

3
tdolphin

Ma solution est très simple, ressemble exactement à une liste déroulante native éditable et fonctionne même dans IE6 (certaines réponses ici nécessitent beaucoup de code ou de bibliothèques externes et le résultat est le même, par exemple le texte dans la zone de texte est placé derrière la liste déroulante de la partie "combobox" ou elle ne ressemble pas du tout à une combobox modifiable).

Le but est de ne couper la liste déroulante que l'icône du menu déroulant visible au-dessus de la zone de texte. Et la zone de texte est un peu large sous la partie combobox, de sorte que vous ne voyez pas son extrémité droite - continue visuellement avec la combobox: https://jsfiddle.net/dLsx0c5y/2/

select#programmoduleselect
{
    clip: rect(auto auto auto 331px);
    width: 351px;
    height: 23px;
    z-index: 101; 
    position: absolute;
}

input#programmodule
{
    width: 328px;
    height: 17px;
}

<table><tr>
<th>Programm / Modul:</th>
<td>
    <select id="programmoduleselect"
        onchange="var textbox = document.getElementById('programmodule'); textbox.value = (this.selectedIndex == -1 ? '' : this.options[this.selectedIndex].value); textbox.select(); fireEvent2(textbox, 'change');"
        onclick="this.selectedIndex = -1;">
        <option value=RFEM>RFEM</option>
        <option value=RSTAB>RSTAB</option>
        <option value=STAHL>STAHL</option>
        <option value=BETON>BETON</option>
        <option value=BGDK>BGDK</option>
    </select>
    <input name="programmodule" id="programmodule" value="" autocomplete="off"
        onkeypress="if (event.keyCode == 13) return false;" />
</td>
</tr></table>

(Utilisé à l'origine, par exemple ici, mais n'envoyez pas le formulaire: old.dlubal.com/WishedFeatures.aspx)

EDIT: les styles doivent être un peu différents pour macOS: Ch ​​est ok, pour FF augmenter la hauteur de la liste déroulante, Safari et Opera ignorent la hauteur de la liste déroulante, augmentez donc la taille de la police (limite supérieure, alors diminuez un peu la hauteur de la zone de texte): https://i.stack.imgur.com/efQ9i.png

2
Ladislav Zima

Étant donné que la balise HTML datalist n'est toujours pas totalement prise en charge, une autre approche que j'ai utilisée est la Dojo Toolkit ComboBox . C'était plus facile à mettre en œuvre et mieux documenté que les autres options que j'ai explorées. Il joue également bien avec les cadres existants. Dans mon cas, j'ai ajouté cette liste déroulante à un site Web existant basé sur Codeigniter et Bootstrap sans problèmes. Vous devez simplement vous assurer d'appliquer le thème Dojo (par exemple, classe = "claro") au parent du combo. élément au lieu de la balise body pour éviter les conflits de style.

Commencez par inclure le code CSS pour l’un des thèmes Dojo (comme "Claro"). Il est important que le fichier CSS soit inclus avant les fichiers JS ci-dessous.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dijit/themes/claro/claro.css" />

Ensuite, inclure jQuery et Dojo Toolkit via CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>

Ensuite, vous pouvez simplement suivre exemple de code de Dojo ou utiliser l'exemple ci-dessous pour obtenir une liste déroulante opérationnelle.

<body>
    <!-- Dojo Dijit ComboBox with 'Claro' theme -->
    <div class="claro"><input id="item_name_1" class=""/></div>

    <script type="text/javascript">
        $(document).ready(function () {
            //In this example, dataStore is simply an array of JSON-encoded id/name pairs
            dataStore = [{"id":"43","name":"Domain Name Renewal"},{"id":"42","name":"Hosting Renewal"}];

            require(
                [ "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], 
                function (Memory, ComboBox) {
                    var stateStore = new Memory({
                        data: dataStore
                    });

                    var combo = new ComboBox({
                        id: "item_name_1",
                        name: "desc_1",
                        store: stateStore,
                        searchAttr: "name"},                        
                        "item_name_1"
                        ).startup();

                });

        });

    </script>
</body>
1
Flareman2020