Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating a select box with a search option

I am trying to replicate what you can see here in this image. enter image description here

I want to be able to either type in the text field above the box or just click on the option directly.

What would be the best way to go about that? Is there anything bootstrap related that exists already?

like image 557
SBB Avatar asked Sep 13 '13 22:09

SBB


People also ask

How do I make a searchable selection box in HTML?

For those who are using bootstrap in their project, a searchable select can be made using dropdown buttons. Add an input field inside the dropdown menu and use javascript to filter through the options.

How do I add options to select box?

Method 1: Append the option tag to the select box The option to be added is created like a normal HTML string. The select box is selected with the jQuery selector and this option is added with the append() method. The append() method inserts the specified content as the last child of the jQuery collection.


1 Answers

This simple code worked for me

<input list="brow"> <datalist id="brow">   <option value="Internet Explorer">   <option value="Firefox">   <option value="Chrome">   <option value="Opera">   <option value="Safari"> </datalist>  

Incase you need to use only select tag use Selectize Js. It has all options we require .Please Try It Demo using Selectize Js

like image 130
Hemanth Palle Avatar answered Sep 27 '22 21:09

Hemanth Palle