How to Textbox search functionality in checkbox list using JQuery

In this article, we will explain that how to add textbox search functionality on checkbox using jquery in asp.net c#. I am previously working on a classified there I need to select multiple cities  that time I have done this code. In the code we can select the multiple values and also count this.  

Source Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="searchontextbox.aspx.cs" Inherits="searchontextbox" %>


<!DOCTYPE html>
<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 Searchcities(txtsearch, citiesname) {
            if ($(txtsearch).val() != "") {
                var count = 0;
                $(citiesname).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(); }
                });
                $('#spancount').html((count) + ' match');
            }
            else {
                $(citiesname).children('tbody').children('tr').each(function () {
                    $(this).show();
                });
                $('#spancount').html('');
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <fieldset style="width: 440px">
                <legend>Textbox search functionality in checkbox list using JQuery </legend>
                <asp:TextBox ID="txtsearch" runat="server" onkeyup="Searchcities(this,'#citiesname');"
                    placeholder="search cities name">
                </asp:TextBox>
                <span id="spancount"></span>
                <div style="height: 200px; overflow-y: auto; overflow-x: hidden">
                    <asp:CheckBoxList ID="citiesname" runat="server" RepeatColumns="1"
                        RepeatDirection="Vertical"  ClientIDMode="Static">
                        <asp:ListItem Text="Lucknow" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Delhi" Value="2"></asp:ListItem>
                        <asp:ListItem Text="Kanpur" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Bahraich" Value="4"></asp:ListItem>
                        <asp:ListItem Text="Mumbai" Value="5"></asp:ListItem>
                        <asp:ListItem Text="Gonda" Value="6"></asp:ListItem>
                        <asp:ListItem Text="Hyderabad" Value="7"></asp:ListItem>
                        <asp:ListItem Text="Goa" Value="8"></asp:ListItem>
                        <asp:ListItem Text="Pune" Value="9"></asp:ListItem>
                        <asp:ListItem Text="Noida" Value="10"></asp:ListItem>


                        <asp:ListItem Text="Gurgaon" Value="11"></asp:ListItem>
                        <asp:ListItem Text="Agar" Value="12"></asp:ListItem>
                        <asp:ListItem Text="Aligarh" Value="13"></asp:ListItem>
                    </asp:CheckBoxList>
                </div>
            </fieldset>
        </div>
    </form>
</body>
</html>




Out-Put:-
How to Textbox search functionality in checkbox list using JQuery   How to Textbox search functionality in checkbox list using JQuery Reviewed by NEERAJ SRIVASTAVA on 10:34:00 PM Rating: 5

3 comments:

  1. But check box list binding dynamically then it will work

    ReplyDelete
  2. How to perform "select all" functionality. Please suggest me in my email :- ugesh.kumargzb@gmail.com

    ReplyDelete

Powered by Blogger.