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

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

• javascript
• jquery
• html
• drop-down-menu

• 2 That's a nice todo list but.... where is the source code of your attempt(s)? This isn't a free programming service where you drop a request and others do the work for you... Can you please update your question with your attempt(s) and I'm sure someone will debug it and explain why it isn't functioning as intended and maybe offer a solution. Please avoid throwing source code into the question with "It doesn't work" Detail is the key to getting a good solution. – NewToJS Commented Jun 29, 2016 at 0:11
• It wasn't working because the jQuery selector depended on select and select2 somehow got rid of the html I had in my list. There was another issue, because the jQuery validate plugin somehow screwed up when I tried to validate my input, but I couldn't really debug it properly and since the select2 plugin sometimes caused some display issue when calling creating the dropdown through ajax even after I used a promise and made sure the dropdown got created after the event was triggered, I thought I might ask how I could do this without any plugin. The code is probably 500-600 lines long. – jarvan Commented Jun 29, 2016 at 0:18
• I mean there are two things I would like to do: make it so that the select textbox is separated into a textfield in which the user can enter text and a dropdown menu, because the default behavior just merges the textbox with the dropdown, and I would like to find the simplest way to remove options from a list depending on what the user enters in real time. You don't need to see the code. (Why did you delete your comment?) – jarvan Commented Jun 29, 2016 at 0:31
• The reason for asking for the source code is to ensure your existing function are not conflicting or causing a syntax error which will cause the rest to fail but I understand if the source code is too big it can be a pain to try cut it down. Use your browsers console for checking errors and maybe guest271314 answer will be along the right lines of what you're looking for? – NewToJS Commented Jun 29, 2016 at 0:33
• Well, the problems were caused by a mismatch in the selector and the html layout and some plugin incompatibilities. I don't know the exact reasons, but I posted this question in order to find the simplest way to solving the issue I had. – jarvan Commented Jun 29, 2016 at 0:37

3 Answers 3

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>

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.

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.