前言

最近开发的一套系统中需要对商品进行管理，在选择商品时，要分别从品牌、型号、商品三个类别分别选择对应的选项才能找到需要的商品，三者的关系为：品牌包含型号，型号包含商品，因此使用了三个不同的 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模糊搜索

前言

开发思路

实现方法

总结

最新文章

热门文章