How to add input text in select option dropdown

Question

I would like to know how to add input text box to the select dropdown and use it as search filter in javascript.

<select class="form-control">
    <option value="trans">Trans</option>
    <option value="fund">Fund</option>
    <option value="insta">Insta</option>
</select>

Solution

You can try <datalist>:

The HTML <datalist> element contains a set of elements that represent the values available for other controls.

<input list="select" name="select">
<datalist class="form-control" id="select">    
  <option value="Trans"/>
  <option value="Fund"/>
  <option value="Insta"/>
</datalist>

Comments

[JIJOMON K.A]

Try to use select2

[mia]

@JIJOMONK.A thanks for reply, can use javascript not jquery

[LazZiya]

This is good, is it possible to restrict the input to the list items only?

[Mamun]

@LazZiya, the input is already bound to the list items by linking the attribute id and list:)

[Admin]

It is a plugin of jquery , So you have to link that url aswell

[LazZiya]

but still the input can accept something else not defined in the datalist. right?

[Mamun]

@LazZiya, now I got what you are meaning, for that we have to write additional code on the input event of the control:)

[mia]

thanks but have edited the code according to requirement, I have to add text input inside select, please review code

[mia]

thanks but have edited the code according to requirement in Laz Ziya post, I have to add text input inside select, please review code

[LazZiya]

I reviewed your edit, it breaks the code and didn't work, it doesn't seem a practical way to deal with select input in this case

[Fakhamatia]

it's not working on the touch keyboard, why? should I send a keypress trigger?