最小的代码可以通过javascript过滤checkboxlist

Project不需要任何 javascript库,如jQuery,Dojo,Prototype,所以我认为没有简单的方法.我想对解释如何做到这一点的问题有深入的答案.正如大多数人可能知道的那样,asp.net checkBoxlist会在Flow repeatLayout中发出如下所示的标记.

<span>
<checkBox><label></br>
<checkBox><label></br>
<checkBox><label></br>
</span>

为简单起见,我没有给出结束/结束标签.我们有一个用于搜索此复选框列表的文本框.现在问题是,

当用户在文本框中键入搜索词并隐藏不匹配的复选框标签时,我将如何筛选复选框列表.

我想得到的更多问题与上述有关

>为此目的,是否有任何现成的STANDALONE脚本？
>在提供搜索功能时,是否有模式,文章,帖子解释故障,要记住的要点？像onkeydown这样的东西不这样做,
>我的想法现在将有一个标签标签的缓存集合innerHTML然后循环遍历每个标签并检查搜索词,当找到时隐藏所有其他但只显示匹配.[我关注的是当列表太长时会发生的事情,在每个按键循环不是我想的最好的主意]

欢迎您提出建议,答案,解决方案和脚本

解决方法

该解决方案基于Ktash的答案.我之所以这样做是因为我想了解更多有关javascript,DOM导航和RegExp的信息.

我用“keydown”改变了“keypress”事件,因为前一个没有触发退格/删除,所以用退格/删除删除所有字符仍然会使列表被过滤掉.

[Default.aspx的]

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript">
    window.onload = function () {
      var tmr = false;
      var labels = document.getElementById('cblItem').getElementsByTagName('label');
      var func = function () {
        if (tmr)
          clearTimeout(tmr);
        tmr = setTimeout(function () {
          var regx = new RegExp(document.getElementById('inputSearch').value);
          for (var i = 0,size = labels.length; i < size; i++)
            if (document.getElementById('inputSearch').value.length > 0) {
              if (labels[i].textContent.match(regx)) setItemVisibility(i,true);
              else setItemVisibility(i,false);
            }
            else
              setItemVisibility(i,true);
        },500);

        function setItemVisibility(position,visible)
        {
          if (visible)
          {
            labels[position].style.display = '';
            labels[position].prevIoUsSibling.style.display = '';
            if (labels[position].nextSibling != null)
              labels[position].nextSibling.style.display = '';
          }
          else
          {
            labels[position].style.display = 'none';
            labels[position].prevIoUsSibling.style.display = 'none';
            if (labels[position].nextSibling != null)
              labels[position].nextSibling.style.display = 'none';

          }
        }
      }

      if (document.attachEvent) document.getElementById('inputSearch').attachEvent('onkeypress',func);  // IE compatibility
      else document.getElementById('inputSearch').addEventListener('keydown',func,false); // other browsers
    };
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <table>
    <tr>
      <td>
        <asp:TextBox runat="server" ID="inputSearch" ClientIDMode="Static" />
      </td>
    </tr>
    <tr>
      <td>
        <asp:CheckBoxList runat="server" ID="cblItem" ClientIDMode="Static" RepeatLayout="Flow" />
      </td>
    </tr>
  </table>
  </form>
</body>
</html>

[Default.aspx.cs]

using System;
using System.Collections.Generic;

namespace RealtimeCheckBoxListFiltering
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender,EventArgs e)
        {
            cblItem.DataSource = new List<string>() { "qwe","asd","zxc","qaz","wsx","edc","qsc","esz" };
            cblItem.DataBind();
        }
    }
}

最小的代码可以通过javascript过滤checkboxlist

解决方法

相关文章