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
Reviewed by NEERAJ SRIVASTAVA
on
10:34:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
10:34:00 PM
Rating:
But check box list binding dynamically then it will work
ReplyDeleteyes 100 % working
DeleteHow to perform "select all" functionality. Please suggest me in my email :- ugesh.kumargzb@gmail.com
ReplyDelete