我有一个带有空白搜索栏的页面,然后在表格下方有一堆联系人。每个联系人是一个 div。
我希望能够在将文本输入搜索栏中时过滤联系人表。(因此,例如,如果在搜索栏中输入“Fran”,您只会看到姓名中带有“Fran”的联系人。如果“Fran”被删除,所有联系人都会恢复默认值。)
这可能吗?如何?(我找到了一个即时搜索 diy 指南,但它只能像谷歌那样工作,在搜索栏下方有一个下拉菜单。)
我有一个带有空白搜索栏的页面,然后在表格下方有一堆联系人。每个联系人是一个 div。
我希望能够在将文本输入搜索栏中时过滤联系人表。(因此,例如,如果在搜索栏中输入“Fran”,您只会看到姓名中带有“Fran”的联系人。如果“Fran”被删除,所有联系人都会恢复默认值。)
这可能吗?如何?(我找到了一个即时搜索 diy 指南,但它只能像谷歌那样工作,在搜索栏下方有一个下拉菜单。)
我建议使用这个 jquery 插件,它不需要 ajax 或服务器通信,它只是在每次击键时根据输入框内容过滤呈现的表。
确保在您的项目中还包含 jquery 库以及此插件以使其正常工作。
下面是一些 Javascript 示例:
<script type="text/javascript">
$(document).ready(function() {
$("#search").keyup(function() {
// Get the search value
var searchValue = $(this).val();
// If no value exists then show all divs
if(searchValue === "") {
$(".your_div").show();
return;
}
// Initially hide all divs
$(".your_div").hide();
// Now show any that contain the search value
$(".your_div:contains('" + searchValue + "').show();
});
});
</script>
以下包含您需要的基本逻辑,尽管它是相反的 - 它隐藏了它找到的内容并且仅用于完全匹配。此外,它是一个按键事件,因此它只会在您输入名称后按空格后隐藏 div,因此您也需要对其进行调整。要在一长串文本中查找匹配项,您需要使用一些正则表达式来针对搜索字符串进行测试。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$(document).ready(function(){
$(".searchbox").keypress(function(){
$("div").each(function(){
if($(this).text() == $(".searchbox").val()){
$(this).hide("fast");
};
});
});
});
</script>
</head>
<body>
<form><input type="text" class="searchbox"></form>
<div>Susan</div>
<div>Fran</div>
<div>Dave</div>
</body>
</head>
</html>
您可以尝试相同的jQuery自动完成插件