Jquery: Filter dropdown list as you type

Question

I have used a prototype plugin which filters the contents of a dropdown as you type. So for example if you typed 'cat' into the text box, only items containing the substring 'cat' would be left as options in the drop down.

Does anyone know of a jquery plugin which can do this?

Answer 1

I was just looking for something similar, and the best one for what I need seems to be the JQuery UI MultiSelect . It turns Multi-select boxes into a pretty slick dual-list view, with live filtering on the master list.

EDIT: New Development!

" Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors."

I'm totally using Chosen on all select-using projects in the foreseeable future.

Answer 2

Select2是Chosen的一个相当新的分支，并且具有更多功能（例如，针对单个项目的AJAX +自定义HTML）。

Answer 3

I wrote a little script to do this a few years ago. It could be packaged up as a jQuery plug-in quite easily, probably. You're welcome to it.

I also do this in my PHP Function Reference Dashboard widget if you want to look at the code there.

Answer 4

Check these plugins:

• SexyCombo
• QuickSelect
• DropList Filter

Answer 5

jQuery autocomplete plugin

EDIT: I initially linked to the wrong autocomplete plugin.

Answer 6

 $(document).ready(function() { $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#filter *").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <h2>Filter</h2> <input id="myInput" type="text" placeholder="Search.."> <br><br> <div class="filter-by"> <span>Filter by:</span> <select class="status-filter" id="filter"> <option value="">All</option> <option value="paid">Paid</option> <option value="accepted">Accepted</option> <option value="pending">Pending</option> <option value="rejected">Rejected</option> </select> </div> 

Answer 7

I just implemented this feature quick and dirty. It uses some global variables, you might want to improve the implementation to remove these.

Here the '#xsca_member_filter' is the filter as a text input and '#members' is the select input.

$('documenet').ready(function(){
    init();
   $('#xsca_member_filter').keyup(function(){
       filter($(this));
   });
});

//save all available options with their values and the empty option.
init = function(){
    options = new Object();
    $('#owner option').each(function(){
        var obj = $(this);
        if(obj.attr("value") != "")
            options[obj.attr('value')] = obj.html();
        else
            emptyOption = obj.html();
    });
    selObj = $('#owner');
};

filter = function(elem){
    var filter = elem.val();
    var selected = $('#owner option:selected').val();

    //delete all options and add the empty option
    selObj.html("");
    selObj.append("<option> "+emptyOption+" </option>");

    //add all options conaining the filter string
    for(value in options){
        var option = options[value];
        if((options[value]).indexOf(filter) != -1){
            selObj.append("<option value='"+value+"'> "+options[value]+" </option>");
        }
    }

    //select the previously selected option
    $("#owner option[value = '"+selected+"']").prop("selected", true);
}

Answer 8

Try the "jquery options filter", based on real select box and matching in the mid of option texts: http://plugins.jquery.com/project/jquery_options_filter

for diyism