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.

Overnight

Answer 1

Simply use select2 plugin to implement this feature

Plugin link: Select2

Champaign

needs redis and jquery – Zarathustra

Answer 2

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.

Content

Answer 3

If you don't like external library, you can use the HTML5 element datalist.

Example from W3School:

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

Moe

this is pretty useful comment. thanks – Dispute

This is useful but i've an issue of showing catched values in dropdown. I tried to use autocomplete="off" even then the value that doesnt exists are showing. I fetch dropdown arrays by an api. – Druggist

Answer 4

I have made a custom dropdown using HTML and CSS with search tag on the top which is fixed at the top of dropdown.You can use the following HTML and CSS with bootstrap:-

<div class="dropdown dropdown-scroll">
<button class="btn btn-default event-button dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    <span>Search</span>
    <span class="caret"></span>
</button>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <div class="input-group input-group-sm search-control">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
        </span>
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <ul class="dropdown-list">
        <li role="presentation" ng-repeat='item in items | filter:eventSearch'>
            <a>{{item}}</a>
        </li>
    </ul>
</div>

And CSS for the above code is:-

.dropdown.dropdown-scroll .dropdown-list{
    max-height: 233px;
    overflow-y: auto;
    list-style-type: none;
    padding-left: 10px;
    margin-bottom: 0px;
}
.dropdown-list  li{
    font-size: 14px;
    height: 20px;
}

.dropdown-list  li > a{
    color: black;
}
.dropdown-list a:hover{
   color: black;
}

.dropdown-list li:hover{
    background-color: lightgray;
}

Screenshot of the dropdown

Landlord

Answer 5

you can use semantic ui to implement this feature

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

Marchand

Answer 6

Use Select2. For Installation Process Click Here

Gabey

how is this different from previous answers suggesting the same thing? – Aid