Вордпрес поиск с автодополнением

  • 19 Июл 2011

Автодополнение при поиске является сейчас очень распространённым и используется на многих сайтах, например, в поисковике Google.
На своем Вордпрес блоге вы также сможете легко реализовать такой функционал.

autocomplate-jquery

Существует очень хороший JQuery плагин для автодополнения. Если ваша тема еще не использует JQuery то скачиваем последнюю версию:


http://code.jquery.com/jquery.min.js
jquery.autocomplete — плагин автодополнения

Создадим каталог «javascript» в каталоге вашей активной темы и скопируйте в него файл jquery.min.js и файлы jquery.autocomplete.pack.js, jquery.autocomplete.css из архива jquery.autocomplete.zip
Осталось их подключить к нашей теме, открываем файл header.php и вставляем следующий код между тегами <head> и </head>:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascripts/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/javascripts/jquery.autocomplete.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
  var data = '<?php
    global $wpdb;
    $search_tags = $wpdb->get_results("SELECT name FROM $wpdb->terms");
    foreach ($search_tags as $mytag){ echo $mytag->name. " "; }
    ?>'.split(" ");
  $("#SEARCH_INPUT_BOX").autocomplete(data);
})
</script>

Заменяем SEARCH_INPUT_BOX на id вашого поля поиска.
Как узнать какой id? Открываем наш сайт в браузере, нажимаем Просмотреть исходный код и ищем HTML код отвечающий за вывод формы поиска
У меня он такой и я заменяю SEARCH_INPUT_BOX на searchinput:

<form method="get" id="searchform" action="http://karlkori.name">
 <fieldset>
  <input name="s" type="text" id="searchinput" value="Поиск">
  <button type="submit"></button>
 </fieldset>
</form>

Что вы думаете?

Имя обязательно

Сайт

 
Войти