用JavaScript搜索文字？
[英]text search in javascript?
问题描述
我有一个包含超过200个链接的页面，这种格式。
<h1>
<a href="somelink">Somelink</a>
some text that explain the meaning of the link.
</h1>
现在，为了便于搜索此链接，我已经放了一个搜索框。
我的要求是搜索所有这些标记，找到与搜索框相关的链接并隐藏链接的其余部分。
怎么在javascript中做到这一点？ （我知道基本的javascript / jquery的东西，但如何进行全文搜索？）我不需要根据相关排序，只是过滤器和show hide足够好。
3 个解决方案
解决方案1
7 2010-07-18 04:28:35
你可以枚举所有h1标签获取内部html并执行indexOf ，或者你可以使用jQuery它有一个自定义包含的功能，它返回给定文本的元素。
这是从jQuery文档复制的示例
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
$("div:contains('John')").css("text-decoration", "underline");
</script>
</body>
</html>
解决方案2
5 已采纳 2010-07-18 04:51:46
希望你觉得这很有用。 它可能不是优雅或最有效但它会让你输入多个搜索词并给出部分匹配（可能需要也可能不需要）。 当我点击搜索按钮时它的方式将隐藏所有其他元素，除了匹配任一搜索词的元素，但你可以修改它以使用结果数组中的元素做任何你想做的事情。 我不建议完全使用它，但希望它能为您提供一个关于如何实现自己的参考点（如果您选择使用除quicksearch之外的解决方案）。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript' language='javascript' >
$(document).ready(function() {
var links = new Array();
$("h1").each(function(index, element) {
links.push({
text: $(this).text(),
element: element
});
});
$("#searchButton").click(function() {
var query = $("#searchBox").val();
var queryTerms = query.split(' ');
var results = new Array();
for(var i = 0; i < queryTerms.length; i++) {
for(var j = 0; j < links.length; j++) {
if (links[j].text.indexOf(queryTerms[i]) > -1) {
results.push(links[j].element);
}
}
}
$("h1").each(function(index, element) {
this.style.display = 'none';
});
for(var i = 0; i < results.length; i++) {
results[i].style.display = 'block';
}
});
});
</script>
</head>
<body>
<p>
<input id="searchBox" type="text" />
<input type="button" id="searchButton" value="Search" />
</p>
<h1>
<a href="somelink">Somelink1</a>
asdf
</h1>
<h1>
<a href="somelink">Somelink2</a>
ssss
</h1>
<h1>
<a href="somelink">Somelink3</a>
3333
</h1>
<h1>
<a href="somelink">Somelink4</a>
232323
</h1>
<h1>
<a href="somelink">Somelink5</a>
fffff
</h1>
</body>
</html>
解决方案3
3 2010-07-18 04:27:56
文字搜索名称（javascript）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.