Живой поиск по странице с помощью jQuery

Недавно делал поиск по странице средствами jQuery. Пока разбирался, как лучше сделать, чтоб оптимально подходило для навигации по контенту на странице, получилось 2 варианта поиска. В итоге для моих нужд лучше подошёл второй вариант, но расскажу сегодня об обоих.

В первом варианте поиск будет вестись по всем словам (символам) в заданной части документа. Во втором варианте список слов задаётся изначально, по мере ввода символов в строку поиска будут предлагаться содержащие их слова. Своего рода поисковые подсказки.

Подключаем библиотеку 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.

Вот собственно и всё, если у кого-то возникнут вопросы по работе скриптов можете задавать их в комментариях. Постараюсь ответить.