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.
6 Answers
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.
Simply use select2 plugin to implement this feature
Plugin link: Select2
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>
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;
}
you can use semantic ui to implement this feature
Use Select2. For Installation Process Click Here
