Gostaria de saber se existe algum plugin ou um tutorial ensinando a criar uma combobox que permite, à medida que for escrevendo nela, filtrar os itens, como na imagem abaixo:
Obs: Estou usando ASP.NET MVC com C#.
Tem vários plugins
que são excelentes para resolver seu problema:
$(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>
$(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>
$(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>
Referencias: