TextBox a Girilen Veriyi CheckBoxList de Arayıp, Arama Sonucunu Ekranda Listelemek

 

Merhaba arkadaşlar bu makalemizde textbox a aramak için girdiğimiz veriyi checkBoxList içerisinde olup olmadığını kontrol edeceğiz. Eğer aradığımız değer checkBoxList de mevcutsa, bulunan değerleri ekranda gösterimini sağlayacağız.


Yukarıdaki işlemleri yapabilmemiz için jquery.min.js  javascriptini kullanacağız.   


 










Şekil 1


 








Şekil 2

 

 

WebForm1.aspx


 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="checkboxlist_jquery.WebForm1" %>

 

<!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 src="jquery.min.js"></script>

    <script type="text/javascript">

        function SearchStaff(txtSearch, cblist) {

            if ($(txtSearch).val() != "") {

                var count = 0;

                $(cblist).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 {

                $(cblist).children('tbody').children('tr').each(function () {

                    $(this).show();

                });

                $('#spnCount').html('');

            }

        }

    </script>

 

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:TextBox ID="txtSearch" runat="server" Height="23px" Width="257px" onkeyup="SearchStaff(this,'#cblist');"  placeholder="Search staff" Font-Names="Arial" Font-Size="Large"></asp:TextBox>

&nbsp;

            <br />

            <br />

            <asp:CheckBoxList ID="cblist" runat="server" Font-Names="Arial" Font-Size="Large">

                <asp:ListItem>Bahadir Sahin</asp:ListItem>

                <asp:ListItem>Melissa Parker</asp:ListItem>

                <asp:ListItem>Tommy Paton</asp:ListItem>

                <asp:ListItem>Alice May</asp:ListItem>

                <asp:ListItem>Michael Alon</asp:ListItem>

                <asp:ListItem>Mike Carson</asp:ListItem>

                <asp:ListItem>Tracy Abbot</asp:ListItem>

                <asp:ListItem>Nancy White</asp:ListItem>

                <asp:ListItem>Jack Fox</asp:ListItem>

                <asp:ListItem>Alina Benson</asp:ListItem>

                <asp:ListItem>Joe Eagle</asp:ListItem>

                <asp:ListItem>Johanna Manson</asp:ListItem>

                <asp:ListItem>Emilia Peterson</asp:ListItem>

                <asp:ListItem>Anna Rice</asp:ListItem>

                <asp:ListItem>Carla Thompson</asp:ListItem>

                <asp:ListItem>John Gray</asp:ListItem>

                <asp:ListItem>Richard Cunningham</asp:ListItem>

                <asp:ListItem>Camille Bernard</asp:ListItem>

                <asp:ListItem>Fynn Zimmermann</asp:ListItem>

            </asp:CheckBoxList>

            <br />

        </div>

    </form>

</body>

</html>

    

     

Bir makalenin daha sonuna geldik. Bir sonraki makalede görüşmek üzere. Bahadır ŞAHİN

About Bahadır Şahin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

0 comments:

Öne Çıkan Yayın

GridView da Seçili Satırı DetailsView da Göstermek

Merhaba arkadaşlar bu makalemizde GridView nesnesi ile birlikte DetailsView nesanesini birlikte kullanacağız. GridView da seçili satırın de...