Select Box With Searchable Options - jQuery Searchbox

Searchbox is a jQuery select box replacement plugin that turns a normal <select> element into a fully styleable dropdown list where the users are able to filter through options with a searchbox as well as add new options to the list just like a tags input.

How to use it:

1. Load the Searchbox plugin's script after loading jQuery JavaScript library as follows:

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/jquery-searchbox.js"></script>

2. Just attatch the function searchBox to the existing select element and the plugin will do the rest.

<select name="lang" class="js-searchBox">
  <option value="">Select A Language</option>
  <option value="1">Python</option>
  <option value="2">Java</option>
  <option value="3">Ruby</option>
  <option value="4">C/C++</option>
  <option value="5">C#</option>
  <option value="6">JavaScript</option>
  <option value="7">PHP</option>
  <option value="8">Swift</option>
  <option value="9">Scala</option>
  <option value="10">R</option>
  <option value="11">Go</option>
  <option value="12">VisualBasic.NET</option>
  <option value="13">Kotlin</option>
</select>

$('.js-searchBox').searchBox();

3. The results. Note that the option value will be stored in the input field as shown below.

<input type="text" class="refineText formTextbox">
<select name="lang" class="js-searchBox" style="display: none;">
  <option value="">Select A Language</option>
  <option value="1">Python</option>
  <option value="2">Java</option>
  <option value="3">Ruby</option>
  <option value="4">C/C++</option>
  <option value="5">C#</option>
  <option value="6">JavaScript</option>
  <option value="7">PHP</option>
  <option value="8">Swift</option>
  <option value="9">Scala</option>
  <option value="10">R</option>
  <option value="11">Go</option>
  <option value="12">VisualBasic.NET</option>
  <option value="13">Kotlin</option>
</select>
<ul class="searchBoxElement">
  <li data-selected="off" data-searchval="" class="selected"><span>Select A Language</span></li>
  <li data-selected="off" data-searchval="1"><span>Python</span></li>
  <li data-selected="off" data-searchval="2"><span>Java</span></li>
  <li data-selected="off" data-searchval="3"><span>Ruby</span></li>
  <li data-selected="off" data-searchval="4"><span>C/C++</span></li>
  <li data-selected="off" data-searchval="5"><span>C#</span></li>
  <li data-selected="off" data-searchval="6"><span>JavaScript</span></li>
  <li data-selected="off" data-searchval="7"><span>PHP</span></li>
  <li data-selected="off" data-searchval="8"><span>Swift</span></li>
  <li data-selected="off" data-searchval="9"><span>Scala</span></li>
  <li data-selected="off" data-searchval="10"><span>R</span></li>
  <li data-selected="off" data-searchval="11"><span>Go</span></li>
  <li data-selected="off" data-searchval="12"><span>VisualBasic.NET</span></li>
  <li data-selected="off" data-searchval="13"><span>Kotlin</span></li>
</ul>

4. Style the searchable dropdown list using your own CSS.

.searchBoxElement{
  background-color: white;
  border: 1px solid #aaa;
  position: absolute;
  max-height: 114px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  line-height: 23px;
  list-style: none;
  z-index: 1;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.searchBoxElement span{
  padding: 0 5px;
}

.searchBoxElement::-webkit-scrollbar {
  display:none;
}

.searchBoxElement li{
  background-color: white;
  color: black;
}

.searchBoxElement li:hover{
  background-color: #50a0ff;
  color: white;
}

.searchBoxElement li.selected{
  background-color: #50a0ff;
  color: white;
}

.refineText{
  padding: 8px 0 8px 0 !important;
}

5. Set the mode to 2 so that you users are able to add more options to the select box.

$('.js-searchBox').searchBox({
  mode: 2
});

6. Set the max number of options to display in the dropdown list. Default: 100.

$('.js-searchBox').searchBox({
  optionMaxSize: 50
});

7. Set the width of the parent container. Default: null.

$('.js-searchBox').searchBox({
  elementWidth: '250'
});

8. Execute a callback function after selection.

$('.js-searchBox').searchBox({
  selectCallback: null
});

---

This awesome jQuery plugin is developed by isystk. For more Advanced Usages, please check the demo page or visit the official website.