通过javascript过滤复选框列表的最小代码
Posted
技术标签:
【中文标题】通过javascript过滤复选框列表的最小代码【英文标题】：Smallest code possible to filter checkboxlist through javascript 【发布时间】：2011-11-11 01:54:17 【问题描述】：Project 不需要任何 javascript 库，例如 jQuery、Dojo、Prototype，所以我想没有简单的方法。我想对解释如何做到这一点的问题有深入的回答。大多数人可能都知道，asp.net checkboxlist 在FlowrepeatLayout 中发出如下标记。
<span>
<checkbox><label></br>
<checkbox><label></br>
<checkbox><label></br>
</span>
为简单起见，我没有放置结束/结束标签。我们有一个文本框用于搜索此复选框列表。现在问题来了，
当用户在文本框中输入搜索词并隐藏不匹配的复选框+标签时，我将如何过滤复选框列表。
我想得到与上述相关的更多问题的答案
是否有任何现成的 STANDALONE 脚本用于此目的？
在提供搜索功能时，是否有解释故障的模式、文章、帖子和要记住的要点？类似onkeydown don't do this,
我现在的想法是缓存一组标签标签innerhtml，然后遍历每个标签并检查搜索词，当找到时隐藏所有其他标签但只显示匹配。[我担心会发生什么当列表太长时，我认为每次按键循环都不是最好的主意]
欢迎您的建议、答案、解决方案、脚本
【问题讨论】：
【参考方案1】：此解决方案基于 Ktash 的回答。我这样做是因为我想了解更多关于 javascript、DOM 导航和 RegExp 的知识。
我用“keydown”更改了“keypress”事件，因为前一个事件不会在退格/删除时触发，所以删除所有带有退格/删除的字符仍然会过滤列表。
[默认.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>
[默认.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();
【讨论】：
@Razvan 这足够详尽，可以标记为答案。但功劳归于 Ktash 我给了他+1，因为他提出了基本的想法:) setTimeout/clearTimeout 可以解决问题 @Razvan 我在评论这个答案之前看到了你的评论 看起来不错。我唯一的评论是，当 IE 8 及更低版本不完全支持时，您使用element.textContent。对于 IE 8 及更低版本的支持，您需要使元素可见，然后执行 var txt = element.textContent || element.innerText 以跨浏览器获取文本值。
@Ktash：是的，我只使用了 textContent ，因为我不理解您代码中的那部分 :) 现在我知道这是出于兼容性考虑。谢谢！ :)【参考方案2】：
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);
并不完美，也不是完全完整，但它应该可以帮助您开始。在执行循环之前有 100 毫秒的延迟，因此它不会在每次按键时都运行，但很可能在他们停止输入之后运行。可能想在您认为合适的情况下使用该值，但它为您提供了总体思路。另外，我没有为inputField 和inputVal 设置变量，但我假设你已经知道如何获取这些变量。如果您的标签不是静态列表 onload，您可能希望每次都获取该列表。
【讨论】：
这确实让我走上了正确的道路。您是否推荐任何相同的模式（我的意思是设计模式）另外我会等到我得到进一步的答案以上是关于通过javascript过滤复选框列表的最小代码的主要内容，如果未能解决你的问题，请参考以下文章