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

Simply use select2 plugin to implement this feature

Plugin link: Select2