CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
jarvan
jarvan

Reputation: 459

Adding a search feature to HTML5 select

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

I need to add a search bar that will allow me to filter the unwanted options from the list. I need to use select and I need to do this without a plugin, what's the easiest way to do this? I tried using the select2 plugin, but it screwed up my entire application, because it depended on some logic written by a previous developer. The data population is already taken care of, so I don't need to do anything to populate it.

I also need to point out that I need to be able to type inside the textbox, something which html5 select doesn't allow me to do and be able to have a dropdown arrow that allows me to see the full list. Can we do it with html5 alone through some trick, or I need a lot of javascript to do this?

Upvotes: 4

Views: 24921

Answers (3)

ds00424
ds00424

Reputation: 1348

You said "without a plugin", but you might take a look at the jQuery Chosen plugin. I wasn't crazy about Select2 for similar reasons. I am now using Chosen for a searchable Select. It was easy to add to my existing application that was using the standard select. It seems Chosen uses your existing Select, hides it, but properly marks selected items so the form processing continues to work. Might need styling to fit into your application styling.

Upvotes: -4

Renish Gotecha
Renish Gotecha

Reputation: 2522

Batter You use <datalist> in stand of the <select> 

<input placeholder="Type Car Name" list="cars">
 <datalist id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
 </datalist>

Note : The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.

Upvotes: 3

guest271314
guest271314

Reputation: 1

Use <datalist> element

<label for="cars">Search cars: <input list="cars" name="cars" type="text">
</label>
<datalist id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</datalist>

Upvotes: 16

Related Questions