Single Dropdown with search box in it

Question

I want to add search box to a single select drop down option.

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>

Adding a input tags as above does not work out.

I have tried using html5-datalist and it works. I want some other options as html5-datalist does not support scrollable option in chrome.

Can anyone suggest any other searchbox options? They should be compatible with django-python framework.

Answer 1

There's also a plain HTML solution You can use a datalist element to display suggestions:

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

Note:Ensure that value of list attribute in input is same as the id of datalist.

Please be advised not all broswers have (full) support for the Datalist Element, as you can see on Can I use.

Answer 2

Simply use select2 plugin to implement this feature

Plugin link: Select2