用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.