текстовый поиск в JavaScript?
У меня есть страница больше чем с 200 ссылками с этим видом форматирования.
<h1>
<a href="somelink">Somelink</a>
some text that explain the meaning of the link.
</h1>
Теперь, для создания это укусило легкий перерыть эту ссылку, я поместил поле поиска.
Мое требование состоит в том, чтобы перерыть весь этот тег и найти ссылки, которые относятся к полю поиска и скрывающемуся отдыху ссылки.
Как сделать это в JavaScript? (я знаю основной материал javascript/jquery, но Как сделать полнотекстовый поиск?) Я не делаю требуемой сортировки согласно соответствующему, просто фильтрую, и шоу скрываются, достаточно хорошо.
3 ответа
Надеюсь, вы найдете это полезным. Вероятно, это не самый элегантный или самый эффективный вариант, но он позволяет вам вводить несколько условий поиска и дает частичные совпадения (которые могут быть нужны, а могут и не понадобиться). Как я сделал это, когда вы нажимаете кнопку поиска, он скроет все другие элементы, кроме тех, которые соответствуют любому из ваших условий поиска, но вы можете изменить это, чтобы делать все, что вы хотите, с элементами в массиве результатов. Я не рекомендую использовать именно это, но, надеюсь, это даст вам ориентир о том, как вы можете реализовать свое собственное (если вы решите использовать решение, отличное от быстрого поиска).
<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>
Я нашел один.
http://github.com/riklomas/quicksearch
, который использует регулярное выражение для поиска.
Вы можете перечислить все теги 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>