How can I put an input in the top of select tag for searching?

Question

I'm trying to make an advanced <select> tag but implementing an input before the first <option> attribute for searching. Something like this:

Here is my code. How can I add <input name="search_category" class="search" /> to my code?

 select { width: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select size="1" class="selection"> <option>Social</option> <option>Political</option> <option>Cultural</option> <option>Athletic</option> <option>Other</option> </select> 

Note: I use jQuery.

Answer 1

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist

This should solve it, if I understood the question correct.

Answer 2

Have you tried the jquery select2 ?

https://select2.github.io/

I think it will easily solve your problem :)

Answer 3

Not Jquery, but you can use datalist

 <style> input { font-size:1.5em; } </style> <input type="text" placeholder="Select" name="cat" list="cat"> <datalist id="cat"> <option>Social</option> <option>Political</option> <option>Cultural</option> <option>Athletic</option> <option>Other</option> </datalist> 

Note: In chrome you will get the select icon, but may not be mozilla

Answer 4

You can use select2 jquery plugin method to implement dropdown with search functionality.

Here the link with the example.

Hope this one is helpfull.

Answer 5

I made good experiences using a plugin called Chosen : https://harvesthq.github.io/chosen/

Or Select2 : https://select2.github.io/

If a jQuery dependency is ok...