Надеюсь, вы найдете это полезным.Возможно, это не элегантный и не самый эффективный способ, но он позволяет вводить несколько поисковых терминов и дает частичные совпадения (которые могут быть или не быть желательными).Как я сделал, когда вы нажмете кнопку поиска, он скроет все остальные элементы, кроме тех, которые соответствуют любому из ваших условий поиска, но вы можете изменить это, чтобы сделать все, что вы хотите с элементами массива результатов.Я не рекомендую использовать это точно, но, надеюсь, это даст вам представление о том, как вы можете реализовать свое собственное решение (если вы решите использовать решение, отличное от быстрого поиска).
<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>