web-dev-qa-db-fra.com

Liste déroulante unique avec zone de recherche

Je souhaite ajouter une zone de recherche à une seule option déroulante.

Code: 

<select id="widget_for" name="{{widget_for}}">
<option value="">select</option>

{% for key, value in dr.items %}

<input placeholder="This ">

<option value="{% firstof value.id key %}" {% if key in selected_value %}selected{% endif %}>{% firstof value.name value %}</option>


{% endfor %}
</select>

L'ajout d'une balise d'entrée comme ci-dessus ne fonctionne pas.

J'ai essayé d'utiliser html5-datalist et cela fonctionne ... Je veux d'autres options car html5-datalist ne prend pas en charge l'option de défilement en chrome.

Quelqu'un peut-il suggérer d'autres options dans la zone de recherche? Elles devraient être compatibles avec le framework Django-python.

javascriptjqueryhtmldropdownboxsearch-box
6
s_user

Utilisez simplement le plugin select2 pour implémenter cette fonctionnalité

Lien du plugin: Select2

 enter image description here

12
Deepak

Il existe également une solution HTML simple. Vous pouvez utiliser un élément datalist pour afficher des suggestions:

<div>
    <datalist id="suggestions">
        <option>First option</option>
        <option>Second Option</option>
    </datalist>
    <input  autoComplete="on" list="suggestions"/> 
</div>

Remarque: Assurez-vous que la valeur de l'attribut list en entrée est identique à l'id de datalist.

Veuillez noter que tous les développeurs n'ont pas (totalement) de support pour l'élément Datalist, comme vous pouvez le voir sur Puis-je utiliser .

1
Fahad Israr

vous pouvez utiliser semantic ui pour implémenter cette fonctionnalité

https://semantic-ui.com/introduction/new.html

1
Morris S