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

enter image description here


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>