Please disable your adblock and script blockers to view this page
 

Add Textbox Search functionality in Asp.Net CheckBoxList using jQuery

Introduction: In this article I am going to share How to implement searching or filtering functionality in checkboxlist using jQuery i.e. making asp.net checkboxlist items searchable. Moreover it will also count total matched items as per search text. 

Add Textbox Search functionality in Asp.Net CheckBoxList using jQuery

Description:  While working on asp.net project it was required to show all employees in checkboxlist so that multiple employees can be selected at a time. But there were more than 500 employees.  Selecting some of the employees from the checkboxlist was very difficult. So I decided to add search functionality to checkboxlist so that I can easily search and select the employees as shown in demo image above.

 Implementation: Let’s create a sample page for demonstration purpose.

HTML Source
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">
        function SearchEmployees(txtSearch, cblEmployees) {
            if ($(txtSearch).val() != "") {
                var count = 0;
                $(cblEmployees).children('tbody').children('tr').each(function () {
                    var match = false;
                    $(this).children('td').children('label').each(function () {
                        if ($(this).text().toUpperCase().indexOf($(txtSearch).val().toUpperCase()) > -1)
                            match = true;
                    });
                    if (match) {
                        $(this).show();
                        count++;
                    }
                    else { $(this).hide(); }
                });
                $('#spnCount').html((count) + ' match');
            }
            else {
                $(cblEmployees).children('tbody').children('tr').each(function () {
                    $(this).show();
                });
                $('#spnCount').html('');
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <fieldset style="width: 240px">
                <legend>Searchable CheckboxList Example</legend>
                <asp:TextBox ID="txtSearch" runat="server" onkeyup="SearchEmployees(this,'#cblEmployees');"
                    placeholder="Search employee">
                </asp:TextBox>
                <span id="spnCount"></span>
                <div style="height: 200px; overflow-y: auto; overflow-x: hidden">
                    <asp:CheckBoxList ID="cblEmployees" runat="server" RepeatColumns="1"
                        RepeatDirection="Vertical" Width="240px" ClientIDMode="Static">
                        <asp:ListItem Text="Sahil" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Kabeer" Value="2"></asp:ListItem>
                        <asp:ListItem Text="Arjun" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Aryan" Value="4"></asp:ListItem>
                        <asp:ListItem Text="Ranbeer" Value="5"></asp:ListItem>
                        <asp:ListItem Text="Armaan" Value="6"></asp:ListItem>
                        <asp:ListItem Text="Salmaan" Value="7"></asp:ListItem>
                        <asp:ListItem Text="Amit" Value="8"></asp:ListItem>
                        <asp:ListItem Text="Virat" Value="9"></asp:ListItem>
                        <asp:ListItem Text="Anand" Value="10"></asp:ListItem>
                    </asp:CheckBoxList>
                </div>
            </fieldset>           
        </div>
    </form>
</body>

</html>

Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon