Skip to content Skip to sidebar Skip to footer
Home / Asp.net / Filter / Javascript / Jquery / Listbox

Jquery Listbox / Textbox Filter

Post a Comment
I have the following jquery function for filtering the contents of a listbox on the onkeyup event from a textbox. function DoListBoxFilter(listBoxSelector, filter, keys, values) {

Solution 1:

I am also using the same code to filter the list box but with a bit of change, in my code first I am comparing the searched value/word with the option items and if match got success then only filtering the list.

var existText = values[i].substring(0, filter.length);

if (existText.toLowerCase() == filter.toLowerCase())

Below is the full code:

functionDoListBoxFilter(listBoxSelector, filter, keys, values) {

  var list = $(listBoxSelector);
  var selectBase = '<option value="{0}">{1}</option>';

  list.empty();
  for (i = 0; i < values.length; ++i) {

    var existText = values[i].substring(0, filter.length);

    if (existText.toLowerCase() == filter.toLowerCase()) {

        var value = values[i];
        if (value === "" || value.toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
            var temp = '<option value="' + keys[i] + '">' + value + '</option>';
            list.append(temp);
        }
    }
  }    
 }

var keys = [];
var values = [];

var options = $('#CountryList option');
$.each(options, function (index, item) {
  keys.push(item.value);
  values.push(item.innerHTML);
});

$(document).ready(function () {
  $('input#CountrySearch').on('keyup', function () {
    var filter = $(this).val();
    DoListBoxFilter('#CountryList', filter, keys, values);
  });
});

You can also see a demo here. In this demo I have used a list containing the more than 500 list items and its working fine without any performance issue.

Solution 2:

It looks like you might be suffering in terms of performance with large lists because you are appending each item one at a time that matches the filter. I would build up an array of matches (or create a documentFragment) and then append that to the DOM in one go. 

functionDoListBoxFilter(listBoxSelector, filter, keys, values) {
    var list = $(listBoxSelector);
    var selectBase = '<option value="{0}">{1}</option>';

    list.empty();
    var i = values.length;
    var temp = [];
    var option, value;
    while (i--) {    
        value = values[i];    
        if (value && value.toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
                option = String.format(selectBase, keys[i], value);
                temp.push(option);
        }
    }
    // we got all the options, now append to DOM
    list.append(temp.join(''));  
}

Solution 3:

Following link helped me, though it is javascript.

Search ListBox items using JavaScript

<headid="Head1"runat="server"><title>Demo</title></head><scripttype="text/javascript"language="javascript">functionSearchList()
    {
        var l =  document.getElementById('<%= ListBox1.ClientID %>');
        var tb = document.getElementById('<%= TextBox1.ClientID %>');
        if(tb.value == ""){
            ClearSelection(l);
        }
        else{
            for (var i=0; i < l.options.length; i++){
                if (l.options[i].value.toLowerCase().match(tb.value.toLowerCase()))
                {
                    l.options[i].selected = true;
                    returnfalse;
                }
                else
                {
                    ClearSelection(l);
                }
            }
        }
    }

    functionClearSelection(lb){
        lb.selectedIndex = -1;
    }

</script><body><formid="form1"runat="server"><asp:TextBoxID="TextBox1"runat="server"onkeyup="return SearchList();"/><br /><asp:ListBoxID="ListBox1"runat="server"Height="150px"Width="250px"><asp:ListItem>Vincent</asp:ListItem><asp:ListItem>Jennifer</asp:ListItem><asp:ListItem>Shynne</asp:ListItem><asp:ListItem>Christian</asp:ListItem><asp:ListItem>Helen</asp:ListItem><asp:ListItem>Vladi</asp:ListItem><asp:ListItem>Bee</asp:ListItem><asp:ListItem>Jerome</asp:ListItem><asp:ListItem>Vinz</asp:ListItem><asp:ListItem>Churchill</asp:ListItem><asp:ListItem>Rod</asp:ListItem><asp:ListItem>Mark</asp:ListItem></asp:ListBox></form></body></html>

Post a Comment for "Jquery Listbox / Textbox Filter"