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=".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>

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./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.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jan 26, 2017 at 13:03 stackstack 10.2k2222 gold badges7070 silver badges130130 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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

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

Have you tried the jquery select2 ?

https://select2.github.io/

I think it will easily solve your problem :)

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

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

Here the link with the example.

Hope this one is helpfull.

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...