Dee*_*ons 6 javascript asp.net search controls checkboxlist
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然后循环遍历每个标签并检查搜索词,当发现时隐藏所有其他但只显示匹配.[我关注的是列表太长时会发生什么,在每个按键上循环不是我想的最好的主意]
欢迎您提出建议,答案,解决方案和脚本
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,您可能希望每次都获取列表.
该解决方案基于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();
}
}
}