Подсказка к поиску как на Google, с помощью jQuery UI «Autocomplete»

8 октября 2010 г.

Здравствуйте, форумчане.

Все мы видели как работает поиск у Яндекса или Гугла. Когда мы начинаем вводить символы, выпадает подсказка с наиболее набираемыми запросами с этими символами.
Вот и передо мной встала необходимость осуществить такой поиск, что и было сделано, а теперь благополучно публикуется в широкие массы. На сверх оригинальность или актуальность данного поста я не претендую, возможно, кто-то уже это делал и публиковал на форуме, но я такого не нашел. То, что это осуществимо, думаю, все понимают, я просто предлагаю максимально простой и короткий путь. Поехали:

1.) Итак, само собой без AJAX тут не обойтись. Да и без jQuery уже никто не обходится. Ставим jQuery. (кстати, если вы не знаете что такое jQuery, или никогда с ним не работали, вряд ли этот пост для вас, но можете рискнуть)

2.) А самая прелесть в том, что не так давно в комплект jQuery UI вошел виджет «Autocomplete», который как раз и позволит нам подставлять свои значения в полю ввода.
Идем сюда: http://jqueryui.com/demos/autocomplete/ , пробуем демки, выбираем скины и т.д.
Потом идет сюда: http://jqueryui.com/download , выбираем что нужно (если вам ничего не нужно, кроме «подсказки к поиску», то нажимаем «Deselect all components», потом находим и кликаем «Autocomplete», нужные галочки сами проставятся), качаем последнюю версию, прикручиваем к сайту. Как прикручивать скрипты и стили надеюсь сами разберетесь.
3.) Теперь настраиваем наш HostCMS, чтобы он выдавал нужный результат для работы «Autocomplete».
Идем в «Типовые динамические страницы», находим поиск (обычно это файл /hostcmsfiles/lib/lib_3/lib_config_3.php). Открываем этот файл, он совсем небольшой:

<?php
if (!empty($_GET['text'])) {
   $new_title= 'Поиск: '.strip_tags(xss(to_str($_GET['text'])));
   $kernel = & singleton('kernel');
   $kernel->set_title($new_title); }
?>

В самое начало файла, перед "if (!empty($_GET['text']))" дописываем следующий код:

$limit = 10; // сколько «подсказок» мы выдадим пользователю
if (!empty($_GET['term']))// переменную 'term' передает виджет «Autocomplete»
{
   $Search = new Search();
   $i=0; $res = array();
   $text = quote_smart($_GET['term']); // не забываем об SQL-инъекциях
   $date = date("Y-m-d");
   // берем сегодняшнюю дату, чтобы просмотреть статистику поиска с начала по сегодняшний день
   // впрочем, можете задать и начальную дату поиска, например месячной давности,
   // тогда вы увидите самые популярные запросы за поледний месяц
    $x = $Search->GetLogStat("",$date,"*$text*");
   foreach ($x as $k => $v) if(strlen($v["search_log_text"])<4)unset($x[$k]);
   foreach ($x as $k => $v) {
      $res[]=array("id"=>$v["search_log_text"],"label"=>$v["search_log_text"],"value"=>$v["search_log_text"]);
      $i++; if($i==$limit)break;
      }
   // формируем нужный массив и прекращаем работу скрипта
   die(json_encode($res));
}

Все, в PHP все готово.

4.) Пишем Javascript. Я предполагаю что все необходимый файлы уже подключены.
После подключения jQuery , jQuery UI пишем наш скрипт:

$(function() {
   var cache = {},
      lastXhr;
   $("#searchinput" ).autocomplete({
      minLength: 1,
      source: function( request, response ) {
         var term = request.term;
         if ( term in cache ) {
            response( cache[ term ] );
            return;
         }
         lastXhr = $.getJSON( "/search/", request, function( data, status, xhr ) {
            cache[ term ] = data;
            if ( xhr === lastXhr ) {
               response( data );
            }
         });
      }
   });
});

, где
«searchinput» - это id поля ввода строки поиска. Не забудьте приписать этот ID вручную;
«/search/» - абсолютный путь к поиску, можете прописать любой свой путь.

Готово, все должно работать.

PS: Внимание, это актуально для UTF-8 версии системы, на старых cp1251 версиях могут быть проблемы с ajax, нужна специальная функция. Если кому понадобится, пишите, объясню.

Создание сайтов в Хабаровске - http://web-alt.ru

16 октября 2010 г.

Re: Подсказка к поиску как на Google, с помощью jQuery UI «Autocomplete»

Недавно делал то же самое для другой CMS, намучался, пока дошёл. Если бы сразу нашёл это сообщение, то гораздо проще было бы по аналогу сделать.

Андрей Николаевич Аронский

30 ноября 2011 г.

Re: Подсказка к поиску как на Google, с помощью jQuery UI «Autocomplete»

Еще можно делать подсказки не по логу запросов, а по индексу поиска, для этого достаточно будет заменить вот это:

$x = $Search->GetLogStat("",$date,"*$text*");
   foreach ($x as $k => $v) if(strlen($v["search_log_text"])<4)unset($x[$k]);
   foreach ($x as $k => $v) {
      $res[]=array("id"=>$v["search_log_text"],"label"=>$v["search_log_text"],"value"=>$v["search_log_text"]);
      $i++; if($i==$limit)break;
      }

на это:

$x = $Search->SearchWords($text);
   foreach ($x as $k => $v) if(strlen($v["search_page_name"])<4)unset($x[$k]);
   foreach ($x as $k => $v) {
      $res[]=array("id"=>$v["search_page_name"],"label"=>$v["search_page_name"],"value"=>$v["search_page_name"]);

      $i++; if($i==$limit)break;

      }

17 августа 2012 г.

Re: Подсказка к поиску как на Google, с помощью jQuery UI «Autocomplete»

Все супер, спасибо. А как еще сделать так, чтобы при выборе подсказки из списка, значение не просто подставлялось в поле поиска, но и автоматом срабатывал поиск, а еще лучше сразу переход на страницу из индекса?

www.energoprofi23.ru

13 июня 2013 г.

Re: Подсказка к поиску как на Google, с помощью jQuery UI «Autocomplete»

А как для 6 версии поправить код типовой страницы? Описание модуля довольно невнятное в этой части...

Авторизация