Editable combobox with filter

Question

I wonder if there is a plugin or a tutorial teaching to create a combobox that allows, as you write on it, filter the items, as in the image below:

Note: I am using ASP.NET MVC with C#.

Answer 1

Has several plugins which are excellent to solve your problem:

1) bootstrap-select

$(document).ready(function() {
  $('.selectpicker').selectpicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/i18n/defaults-pt_BR.min.js"></script>

<select class="selectpicker" data-live-search="true">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

---

2) Select2

$('select').select2();

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/i18n/pt-BR.js"></script>

<select style="width:150px">
   <option>1</option>  
   <option>11</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
</select>

---

3) jquery.sumoselect

$(document).ready(function() {
  $('.SlectBox').SumoSelect({search: true, searchText:'Enter here.'});  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href="http://hemantnegi.github.io/jquery.sumoselect/stylesheets/sumoselect.css" rel="stylesheet"/>
<script src="http://hemantnegi.github.io/jquery.sumoselect/javascripts/jquery.sumoselect.js"></script>

<select class="SlectBox">
  <option>1</option>
  <option>11</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

---

4) jQuery Editable Select

$(function(){
  $('#editable-select').editableSelect();
});

.es-list { max-height: 160px !important; }

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">

<select id="editable-select">
    <option>1</option>
    <option>11</option>
    <option>2</option>
    <option>22</option>
</select>

References:

• bootstrap-select
• Select2
• jquery.sumoselect
• jQuery Editable Select