文本搜索在JavaScript？ [英] text search in javascript?
问题描述
< h1> 我的网页连结超过200个连结。
< a href =somelink> Somelink< / a>
一些解释链接含义的文字。
< / h1>
现在，为了方便搜索这个链接，我放了一个搜索框。 / p>
我的要求是搜索所有这个标签并找到与
搜索框相关的链接并隐藏链接的其余部分。
如何在javascript中执行此操作？ （我知道基本的JavaScript / jQuery的东西，但如何做全文搜索？）我不需要根据相关的排序，只是过滤器和显示皮肤就够了。
希望你找到这个有用的。它可能不是优雅或最有效的，但它会让你输入多个搜索词并给出部分匹配（可能或不需要）。我单击搜索按钮时所做的方式会隐藏除符合搜索关键字之外的所有其他元素，但您可以对此进行修改，以根据结果数组中的元素执行任何操作。我不建议使用它，但希望它能为您提供一个关于如何实现自己的（如果您选择使用除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（''）; $ b （var i = 0; i< queryTerms.length; i ++）{
for（var j = 0; j< links）
$ b var results = new Array如果（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 =searchBoxtype =text/>
< input type =buttonid =searchButtonvalue =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>
I have a page with more than 200 links with this kind of formatting.
<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 ? ( 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.
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).
<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>
这篇关于文本搜索在JavaScript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
