jQuery在大型HTML頁面上搜索

我有一個任務完成工作。我有一個帶有產品表格的HTML頁面。我需要提供一個搜索框，允許用戶輸入要搜索的產品，然後使用jQuery在頁面中搜索匹配的單詞，然後將它們附加在表格上方的div中，並抓取它們鏈接到的href 。jQuery在大型HTML頁面上搜索

無法搜索數據庫，因爲我無法訪問服務器，以前是否有人這樣做過，或者看過任何好的資源或插件。這似乎是一個相對容易的任務，但我時間不夠。

下面是我剛纔放在一起的代碼，除了我無法與lowerCase/upperCase進行比較之外，效果很好。有任何想法嗎。

$(document).ready(function() { 
$('#searchButton').click(function() { 
$(".searchresults").slideUp('fast', function(){ 

var arr = []; 
var htmlsbr = "Your Search Results:<br />"; 

$('a:contains("' + $('#searchText').val() + '")').each(function() { 
            arr.push($(this).text()+";"+$(this).attr('href')); 
}); 

$.each(arr, function(index, value) { 
htmlsbr = htmlsbr + '<p><a href="'+value.split(';')[1]+'" name="'+value.split('; ')[0]+'">'+value.split(';')[0]+'</a></p>'; 
}); 

$(".searchresults").append(htmlsbr).slideDown('slow'); 

}).html(' '); 
}); 
}); 

</script> 
<style> 
p {color: brown;} 
p.highlight {background-color: orange;} 
body {background-color: beige;} 
</style> 
</head> 
<body> 
<div class="searchresults"></div> 
<input id="searchText" value="second" /> 
<button id="searchButton">Search</button> 
<p><a href="http://google.com" rel="this is the first entry.">This is the first entry. </a></p> 
<p><a href="http://ebay.com" rel="this is the second entry">This is the second entry. </a></p> 
<p><a href="http://msn.com" rel="this is the third entry.">This is the third entry. </a></p> 
<p><a href="http://yahoo.com" rel="this is the fourth entry.">This is the fourth entry. </a></p>'

來源

2011-10-19 HomeBrew

您可以使用jQuery Replace Text plugin

例（未測試） -

jQuery('selector').replaceText($("#yourtextbox").val(),function (str) { 
    //do your stuff 
}));

來源

2011-10-19 09:26:43 ipr101

Quicksearch plugin可以完成這項工作。

來源

2011-10-19 09:24:56 mamoo

謝謝，可惜我寧願因爲它需要在IE6工作使用的東西輕。 – HomeBrew

jQuery在大型HTML頁面上搜索

回答

相關問題