Combobox editable with filter

Navigation
0

I would like to know if there is a plugin or a tutorial teaching to create a combobox that allows, as you type in it, to filter the items, as in the image below:

Note: I'm using ASP.NET MVC with C #.

    
asked by anonymous 07.12.2016 / 18:24

1 answer

3

You have several plugins that are great for solving 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><linkhref="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><scriptsrc="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><selectclass="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><scriptsrc="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><selectstyle="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><linkhref="http://hemantnegi.github.io/jquery.sumoselect/stylesheets/sumoselect.css" rel="stylesheet"/>
<script src="http://hemantnegi.github.io/jquery.sumoselect/javascripts/jquery.sumoselect.js"></script><selectclass="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:

07.12.2016 / 20:25
How do I upload an image that can be updated but remains with the same name? [closed] How can I open a modal after a submit event