Single Dropdown with search box in it
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>