0

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:

Combobox editável com filtro

Obs: Estou usando ASP.NET MVC com C#.

1 Resposta 1

3

Tem vários plugins que são excelentes para resolver seu problema:

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>

Referencias:

2
  • 1
    algum desses objetos persistem uma valor que não contenha na lista, imagine que o combo exibe as Horas do dia nesse formato: 00:00; 01:00; 02:00... 23:00 e o usuário queira digitar por exemplo 02:45, logicamente esse horário não existe na lista porém eu consigo capturar esse valor (02:45) que o usuário digitou ?
    – hard123
    Commented 21/10/2020 às 20:10
  • 1
    @hard123 na documentação: github.com/netdragoon/… e no exemplo: indrimuska.github.io/jquery-editable-select ele adiciona o novo item ao elemento. Não fiz edição porque aqui foi respondido de acordo com a pergunta, mas, está ai o que precisa
    – novic
    Commented 21/10/2020 às 21:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .