Single Dropdown with search box in it

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.

Upvotes: 30

Answers (4)

Fahad Israr

Reputation: 1229

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.

Upvotes: 65

Deepak Jassi

Reputation: 31

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

Upvotes: 3