#jquery #search
#jquery #Поиск
Вопрос:
У меня есть задача, которую нужно выполнить для работы. У меня есть HTML-страница с таблицей продуктов. Мне нужно представить окно поиска, которое позволяет пользователю вводить продукт для поиска, затем использовать jQuery для поиска на странице подходящих слов, а затем прикреплять их в div над таблицей, а также захватывать href, на который они ссылаются.
Невозможно выполнить поиск в базе данных, поскольку у меня нет доступа к серверу, кто-нибудь делал это раньше или видел какие-либо хорошие ресурсы или плагины. Это кажется относительно простой задачей, но у меня мало времени.
Вот следующий код, который я только что собрал, отлично работает, за исключением того, что у меня возникают проблемы при сравнении со строчными / прописными буквами. Есть идеи.
$(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>'
Ответ №1:
Вы могли бы использовать плагин jQuery Replace Text
Пример (не тестировался) —
jQuery('selector').replaceText($("#yourtextbox").val(),function (str) {
//do your stuff
}));
Ответ №2:
Плагин Quicksearch может выполнить эту работу.
Комментарии:
1. Спасибо, к сожалению, я бы предпочел использовать что-то более легкое, поскольку оно должно работать в IE6.