用JavaScript搜索文字？
[英]text search in javascript?
问题描述
I have a page with more than 200 links with this kind of formatting. 
我有一个包含超过200个链接的页面，这种格式。
<h1>
<a href="somelink">Somelink</a>
some text that explain the meaning of the link.
</h1>
Now, to make it bit easy to search through this link, i have put a search box. 现在，为了便于搜索此链接，我已经放了一个搜索框。
My requirement is to search through all this tag and find the links that are relevant to the search box and hiding rest of the link. 我的要求是搜索所有这些标记，找到与搜索框相关的链接并隐藏链接的其余部分。
How to do it in javascript ? 怎么在javascript中做到这一点？ ( i know basic javascript/jquery stuff but How to do full text search ? ) I do not required sorting according to relevant, just filter and show hide is good enough. （我知道基本的javascript / jquery的东西，但如何进行全文搜索？）我不需要根据相关排序，只是过滤器和show hide足够好。
3 个解决方案
解决方案1
7 2010-07-18 04:28:35
You can enumerate all h1 tags get inner html and do indexOf , or you can use jQuery it has a custom made contains functionality, which returns the elements having given text. 你可以枚举所有h1标签获取内部html并执行indexOf ，或者你可以使用jQuery它有一个自定义包含的功能，它返回给定文本的元素。
Here is an example copied from jQuery docs 这是从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
Hopefully you find this useful. 希望你觉得这很有用。 It probably is not the elegant or most efficient but it will let you enter multiple search terms and gives partial matches (which may or may not be wanted). 它可能不是优雅或最有效但它会让你输入多个搜索词并给出部分匹配（可能需要也可能不需要）。 The way I have made it when you click the search button it will hide all other elements except ones matching either of your search terms but you can modify this to do whatever you want with the elements in the results Array. 当我点击搜索按钮时它的方式将隐藏所有其他元素，除了匹配任一搜索词的元素，但你可以修改它以使用结果数组中的元素做任何你想做的事情。 I don't recommend using this exactly but hopefully it will give you a point of reference on how you may want to implement your own (if you choose to go with a solution other than the quicksearch). 我不建议完全使用它，但希望它能为您提供一个关于如何实现自己的参考点（如果您选择使用除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
I found one. 我发现了一个。
http://github.com/riklomas/quicksearch http://github.com/riklomas/quicksearch
which uses regex for search. 它使用正则表达式进行搜索。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.