可以通过javascript过滤复选框列表的最小代码_Javascript_Asp.net_Search_Controls_Checkboxlist

可以通过javascript过滤复选框列表的最小代码

javascript asp.net search

可以通过javascript过滤复选框列表的最小代码,javascript,asp.net,search,controls,checkboxlist,Javascript,Asp.net,Search,Controls,Checkboxlist,这个项目不需要任何javascript库，比如jQuery、Dojo和Prototype，所以我认为这不是一个简单的方法。我想对这个问题有一个深入的回答，解释人们将如何做到这一点。正如大多数人可能知道的，asp.net复选框列表在FlowrepeatLayout中发出如下标记 <span> <checkbox><label></br> <checkbox><label></br> <checkbox>

这个项目不需要任何javascript库，比如jQuery、Dojo和Prototype，所以我认为这不是一个简单的方法。我想对这个问题有一个深入的回答，解释人们将如何做到这一点。正如大多数人可能知道的，asp.net复选框列表在

Flow

repeatLayout中发出如下标记

<span>
<checkbox><label></br>
<checkbox><label></br>
<checkbox><label></br>
</span>

为了简单起见，我没有添加结束/结束标记。我们有一个文本框来搜索这个复选框列表。现在问题来了

当用户在文本框中键入搜索词并隐藏不匹配的复选框+标签时，如何过滤复选框列表。

还有一些问题，我想得到答案，这是与上述有关

是否有现成的独立脚本用于此目的

在提供搜索功能时，是否有模式、文章、帖子来解释故障和要点？类似于

onkeydown的操作不要这样做，

我现在的想法是缓存标签标签的集合

innerHTML

，然后循环遍历每个标签并检查搜索词，当发现时隐藏所有其他标签，但只显示匹配项。[我关心的是当列表太长时会发生什么，我想在每个按键上循环不是最好的想法]

欢迎您的建议、答案、解决方案和脚本

var tmr=false；
var tmr = false;
var labels = document.getElementsByTagName('label')
var func = function() {
    if (tmr) clearTimeout(tmr);
    tmr = setTimeout(function () {
        var regx = new Regex(inputVal); /* Input value here */
        for(var i = 0, size = labels.length; i < size; i++) {
            if(regx.match(labels[i].textContent || labels[i].innerText)) labels[i].style.display = 'block';
            else labels[i].style.display = 'none';
        }
    }, 100);
}
if (document.attachEvent) inputField.attachEvent('onkeypress', func);
else inputField.addEventListener('keypress', func, false);

var labels=document.getElementsByTagName（'label'）
var func=函数（）{
如果（tmr）清除超时（tmr）；
tmr=设置超时（函数（）{
var regx=new Regex（inputVal）；/*此处输入值*/
对于（变量i=0，大小=labels.length；i


不完美，也不完全，但它应该让你开始。在执行循环之前有100毫秒的延迟，这样它就不会在每个按键上运行，但很可能是在他们停止键入之后。也许你想在你认为合适的时候稍微利用一下这个值，但是它给了你一个大概的想法。另外，我没有为inputField
或inputVal
设置变量，但是我假设您已经知道如何获取这些变量。如果您的标签不是静态列表onload，您可能希望每次都获得该列表。
此解决方案基于Ktash的答案。我之所以这么做是因为我想了解更多关于javascript、DOM和RegExp的知识
我用“keydown”更改了“keypress”事件，因为上一个事件在backspace/delete时不会触发，所以使用backspace/delete删除所有字符仍然会使列表过滤
[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>


window.onload=函数（）{
var tmr=假；
var labels=document.getElementById（'cblItem'）.getElementsByTagName（'label'）；
var func=函数（）{
如果（tmr）
清除超时（tmr）；
tmr=设置超时（函数（）{
var regx=new RegExp（document.getElementById（'inputSearch'）.value）；
对于（变量i=0，大小=labels.length；i0）{
if（labels[i].textContent.match（regx））setItemVisibility（i，true）；
else setItemVisibility（i，false）；
}
其他的
setItemVisibility（i，true）；
}, 500);
函数setItemVisibility（位置，可见）
{
如果（可见）
{
标签[position].style.display=''；
标签[position].previousSibling.style.display=''；
if（标签[position].nextSibling！=null）
标签[位置].nextSibling.style.display=''；
}
其他的
{
标签[position].style.display='none'；
标签[position].previousSibling.style.display='none'；
if（标签[position].nextSibling！=null）
标签[position].nextSibling.style.display='none'；
}
}
}
if（document.attachEvent）document.getElementById（'inputSearch'）.attachEvent（'onkeypress'，func）；//IE兼容性
else document.getElementById（'inputSearch'）.addEventListener（'keydown'，func，false）；//其他浏览器
};

[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();
        }
    }
}

使用系统；
使用System.Collections.Generic；
命名空间RealtimeCheckBoxListFiltering
{
公共部分类默认值：System.Web.UI.Page
{
受保护的无效页面加载（对象发送方、事件参数e）
{
cblItem.DataSource=新列表（）{“qwe”、“asd”、“zxc”、“qaz”、“wsx”、“edc”、“qsc”、“esz”}；
cblItem.DataBind（）；
}
}
}
这确实让我走上了正确的道路。你推荐相同的款式吗（我指的是设计款式），我会等我进一步了解answers@Razvan这足够详尽，可以作为答案。但值得赞扬的是，克塔希给了他+1，因为他有一个基本的想法：）setTimeout/cleartTimeout执行trick@Razvan在对这个答案发表评论之前，我看到了你的评论。我唯一的意见是，当IE8及以下版本不完全支持时，您可以使用element.textContent
。对于IE 8及以下版本的支持，您需要使元素可见，然后执行var txt=element.textContent | | element.innerText
，以在浏览器中获取文本值。@Ktash:是的，我只使用了textContent，因为我不理解代码中的那部分：），现在我知道这是出于兼容性。谢谢！：）