jQuery实现C#CheckBoxList模糊搜索
前言
最近开发的一套系统中需要对商品进行管理,在选择商品时,要分别从品牌、型号、商品三个类别分别选择对应的选项才能找到需要的商品,三者的关系为:品牌包含型号,型号包含商品,因此使用了三个不同的 asp:CheckBoxList 控件进行开发。
但是在开发完成之后,发现当 CheckBoxList 中数据过多的时候,查找起来相当麻烦,因此考虑在控件外部加多一个 Textbox ,并且使用 jQuery 控制不包含关键字的元素隐藏起来。
开发思路
那么具体的思路是在 CheckBoxList 绑定数据之后,当 Textbox 中文本发生改变时,触发 jQuery 的 Properchange 事件,判断 CheckBoxList 中的元素是否包含所输入的值,如果包含,则设置为显示,如果不包含,则设置为隐藏。
实现方法
首先在页面上添加一个 TextBox 以及 CheckBoxList 控件,记得要加上 ClientIDMode="Static" ,这样子后面在 jQuery 中才能正确找到对应的控件。
<table class="table_r">
<tr>
<td valign="top" class="s_td">品牌:
<asp:TextBox ID="txtBrand" CssClass="inp_text" runat="server" ClientIDMode="Static"></asp:TextBox>
</td>
</tr>
<tr>
<td class="td_s" width="25%">
<div class="Marketer_list checkbox checkbox-primary">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBoxList ID="chlBrand" runat="server" ClientIDMode="Static">
</asp:CheckBoxList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</td>
</tr>
</table>
在后台代码中对 ChlBrand 控件进行数据绑定。
protected void Page_Load(object sender, EventArgs e)
{
//Response.Cache.SetNoStore();
if (!IsPostBack)
{
this.InitData();
}
}
//页面初始化赋值
protected void InitData()
{
this.BindBrand();
}
//绑定品牌
private void BindBrand()
{
GoodsBrandBLL goodsBrandBLL = new GoodsBrandBLL();
IList<GoodsBrandModel> brandlist = goodsBrandBLL.SelectBrandAll().ToList();
chlBrand.DataSource = brandlist;
chlBrand.DataTextField = "BRANDNAME";
chlBrand.DataValueField = "BRANDID";
chlBrand.DataBind();
}
绑定完成之后运行代码,在浏览器中查看,会发现 CheckBoxList 中的每一个元素都由一对 tr 标签包含起来,因此我们可以通过 jQuery 选择器找到该 table 中的所有 tr 标签,判断是否包含关键字,并对 tr 标签进行隐藏、显示操作。
$(document).ready(function () {
//品牌模糊搜索
$("#txtBrand").bind('input propertychange', function () {
//获取 txtBrand 的值
var brand = $("#txtBrand").val();
$("#chlBrand tr:contains('" + brand + "')").show();
$("#chlBrand tr").not("tr:contains('" + brand + "')").hide();
});
});
以上就是对 CheckBoxList 中的元素进行关键字匹配并对他进行隐藏的操作,不知道大家看懂了没有,希望我的文章对你能有帮助。
总结
这次对 CheckBoxList 进行模糊搜索的操作花了一点点时间,自己本身也是基础不是很扎实,一开始其实就考虑了用 jQuery 来实现,但是碍于自己对于 jQuery 不是很熟悉,不知道具体怎么去实现,后来花了很大一部分时间在于思考如何在后台实现这个需求,那最后也是在同事的提醒下,熟悉了 jQuery 选择器的操作后,成功实现了。这让我感到在 .NET Framework 开发中,jQuery 是一种很有必要去掌握的技术,那么接下来会花时间在这部分的知识上面,希望能尽快精通,对工作带来更大的便利。
jQuery实现C#CheckBoxList模糊搜索的更多相关文章
- ASP.NET jQuery 随笔 显示CheckBoxList成员选中的内容
通过jQuery来获取CheckBoxList成员内容. <%@ Page Language="C#" AutoEventWireup="true" Co ...
- jquery.chosen.js实现模糊搜索
jquery.chosen.js查询时,chosen默认从第一个字符搜索,所以写中间的字符搜索时,是搜索不出来的 若想实现中间字符的模糊查询,下面的js中(search_contains属性为true ...
- Jquery.Validate验证CheckBoxList,RadioButtonList,DropDownList是否选中
http://blog.csdn.net/fox123871/article/details/8108030 <script type="text/javascript"&g ...
- jquery中当CheckBoxList被选中时提示
$(function(){ $('input:checkbox').on('change', function(){ //当复选框选中时出现提示 if($('input:checkbox:checke ...
- ASP.NET CheckBoxList Operations with jQuery
本文描述了如何通过jQuery来对ASP.NET CheckBoxList控件进行一些基本操作,如通过value/text/index check/uncheck CheckBoxList,最小/最大 ...
- js、jquery实现模糊搜索功能
模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...
- jQuery对标签select优化:实现模糊搜索查询功能
由于select标签中的option条数较多,翻页查询比较麻烦,需要对select标签进行优化,解决方法是通过增加模糊查询功能来提高用户体验感. 优化后的界面如下: 在实现这个优化的过程中,参考了两个 ...
- jquery 下拉框插件,实现智能补全,模糊搜索,多选
近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索 ...
- jquery根据接口返回的值来设置asp:CheckBoxList的选中值
接口返回一个json的值,然后通过jquery来选中asp:CheckBoxList相应选中的值 <asp:CheckBoxList runat="server" Repea ...
随机推荐
- [linux]在使用rsync时需要注意的小细节
很简单:前一个目录末尾是目录的话,最后是否带/是有区别的. 具体看测试: # usr @ the-pc in ~/cptest02 [2:28:02] $ ll 总用量 0 # usr @ the-p ...
- Confluence 邮箱设置
Confluence有两种方法设置邮箱 原理: confluence服务器配置好邮箱信息,用户触发邮件发送规则时,confluence服务使用已配置的邮箱信息登录到邮箱服务器,进行发件服务. 那么我们 ...
- 第14节_BLE协议ATT层
下面这个图是BLE协议各层跟医院的各个科室的类比图: 跟医院类比,ATT层就是化验室,通过它可以得到各种检查结果──属性.这些检查结果之间有什么联系,它们组合起来体现了什么,化验室是不知道的,这些得由 ...
- 【Spring AOP】切入点表达式(四)
一.切入点指示符 切入点指示符用来指示切入点表达式目的,在Spring AOP中目前只有执行方法这一个连接点,Spring AOP支持的AspectJ切入点指示符如下: execution:用于匹配方 ...
- nodejs接收post请求参数
原文 https://blog.csdn.net/u013263917/article/details/78682270#1.2 nodejs接收post请求参数1.1-浏览器发送post请求参数的方 ...
- matlab的plot3()函数、mesh()函数和surf()函数
1.plot3()函数 例1:绘制一条空间折线. x=[0.2,1.8,2.5]; y=[1.3,2.8,1.1]; z=[0.4,1.2,1.6]; figure(1);plot3(x,y,z); ...
- 学习-angular 7入门
1.安装脚手架:npm install -g @angular/cli 安装之后,输入命令 ng v: Package Version -------------------------------- ...
- 数据库创建,用户管理,导入dmp文件
创建数据库文件 CREATE TABLESPACE toolset LOGGING DATAFILE '/home/oracle/app/oracle/oradata/orcl/toolset.dbf ...
- isinstance 与 issubclass
isinstance与issubclass都是用于判断的,有什么区别呢? 1. isinstance字面意思:实列, 用户判断对象所属类型,包含类的继承关系. 2. issubclass字面理解:是子 ...
- [LeetCode] 215. Kth Largest Element in an Array 数组中第k大的数字
Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...