Недавно делал поиск по странице средствами jQuery. Пока разбирался, как лучше сделать, чтоб оптимально подходило для навигации по контенту на странице, получилось 2 варианта поиска. В итоге для моих нужд лучше подошёл второй вариант, но расскажу сегодня об обоих.
В первом варианте поиск будет вестись по всем словам (символам) в заданной части документа. Во втором варианте список слов задаётся изначально, по мере ввода символов в строку поиска будут предлагаться содержащие их слова. Своего рода поисковые подсказки.
1й вариант
Подключаем библиотеку jQuery, плагин higlighting отвечающий за поиск и выделение в тексте совпавших значений и скрипт который будет обрабатывать поисковые запросы. Скрипт запускается при клике по элементу с id=»submit».
<script src="js/jquery.js"></script> <script src="js/jquery.highlight.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#submit").click(function(){ var term = ""; var n = "0"; $('body').removeHighlight(); $("p.results").hide().empty(); term = $('#term').attr('value'); if($('#term').val() == ""){ $("p.results").fadeIn().append("Enter search query in field above"); return false; }else{ $('.main').highlight( term ); n = $("span.highlight").length; if(n == 0){ $("p.results").fadeIn().append("Not found"); }else{ $("p.results").fadeIn().append('Found: '+n+' matches.'); } return false; } }); }); </script> |
где:
переменная term — получает значение поискового запроса;
переменная n — отвечает за количество найденных совпадений;
функция removeHighlight() — удаляет предыдущие результаты поиска;
функция hide() — скрывает блок с информацией о результатах поиска;
функция empty() — удаляет содержимое блока с результатами поиска;
функция fadeIn() — делает видимым блок с информацией о результатах поиска;
функция append() — добавляет контент в блок с информацией о результатах поиска;
функция highlight() — обрамляет все совпавшие с поисковым запросом слова в тег span с class=»highlight»;
свойство length — возвратит число найденных совпадений на странице.
Между тегами body нужно вставить форму для ввода поисковых запросов, контейнер для вывода информации о результатах поиска и блок с классом main внутри которого будет производится поиск.
<form id="search-highlight" method="post" action="#"> <input type="text" name="term" id="term" /> <input type="submit" name="submit" id="submit" value="Search" /> </form> <p class="results"></p> <div class="main"> Контент </div> |
2й вариант
Подключаем файл с стилями, виджет jQuery UI: Autocomplete, библиотеку jQuery, плагин higlighting отвечающий за поиск и выделение в тексте совпавших значений и скрипт который будет обрабатывать поисковые запросы.
<link rel="stylesheet" href="style/jquery-ui.css"> <script src="js/jquery-ui.js"></script> <script src="js/jquery.js"></script> <script src="js/jquery.highlight.js"></script> <script> $(function() { var availableTags = [ "ActionScript", "BASIC", "C++", "Delphi", "Java", "JavaScript", "Pascal", "PHP", "Python", "Ruby", "Visual Fortran" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script> <script type="text/javascript"> $(document).ready(function(){ $('#submit').click(function(){ var term = "#"; var tags = ""; $('body').removeHighlight(); if($('#tags').val() != "") { term += $("#tags").val(); tags = $('#tags').attr('value'); } $('h3').highlight(tags); location.href = term.toLowerCase(); }); }); </script> |
где:
переменная term – отвечает за формирование ссылки на закладку, начинается символом #, затем идет название закладки (значение поискового запроса);
переменная tags – получает значение поискового запроса;
функция toLowerCase() — приводит строку к нижнему регистру;
В данном случае поиск будет производится только по элементам массива availableTags внутри тегов h3. В скрипте формируется ссылка на закладку и после нажатия на кнопку поиска осуществляется переход к тегу с заданным id.
Поиск по странице с помощью jQuery: Пример1 и Пример2.
Вот собственно и всё, если у кого-то возникнут вопросы по работе скриптов можете задавать их в комментариях. Постараюсь ответить.
Спасибо за полезные фичи. Возможно, где нибудь пригодятся.
Как раз думал, что можно сделать, чтобы люди не искали слово на странице в браузере, а вводили его прямо на странице..
Хорошая идея, спасибо за фишку.