May 10, 2009

Как добавить поиск с автозаполнением Яндекса на сайт

Функция автозаполнения на сайте состоит из трёх компонентов: клиентской части (стили и скрипты, запрашивающие и отрисовывающие предположения по мере набора текста), серверной части, осуществляющей поиск в БД и/или запрос к поисковой системе, и собственно интерфейса поисковой системы (если решено её использовать). В своё время в качестве последнего компонента я решил выбрать Яндекс.

Я подсмотрел какие AJAX-запросы и куда отправляются по мере набора запроса на сайте Яндекса. Единственная сложность возникла лишь в том, что он возвращает данные в нестандартном формате, который становится уж более-менее ликвидным JSON'ом после замысловатых манипуляций, любезно подсказанных Alternator'ом на форуме nulled.ws, за что ему большое спасибо.

На клиентской стороне было решено поставить Autocompleter, разработанный Digitarald'ом. Безусловно, можно написать и собственный обработчик, но и этот вполне справляется.

Серверная часть. Для начала получим предположения, затем выполним над ними манипуляции, и в результате получим массив PHP. Получился эдакий скрипт преобразования предположений Яндекса в PHP массив:
<?php
$file=file_get_contents("http://suggest.yandex.ru/suggest-ya.cgi?ct=text/html&part=".urlencode($_REQUEST['value'])."&v=2");
$file=strrchr($file,"[");
$file=substr($file,0,strpos($file,"]"))."]";
$file=iconv("CP1251","UTF-8",$file);
$data=json_decode($file);
header("Content-type: text/html; charset=utf-8");
foreach($data as $key=>$val){
print '<li>'.$val.'</li>';
}
?>

В скрипт передаётся переменная $value, в которой содержится набираемый текст. Она ловко подставляется в запрос, по которому мы получаем список предположений. Затем, мы преобразовываем их в формат JSON, понятный функции json_decode(), посредством которой мы и разобьём всё это богатство в полноценный PHP-массив. Однако, прежде чем это сделать, в четвёртой строке полученные в windows-1251 данные перекодируются в понятную json'у utf-8. Шестой строкой объявляется та самая utf-8, начиная со следующей строки мы можем свободно в зависимости от ситуации управлять массивом. Как я уже сказал выше, этот скрипт передаёт данные autocompleter'у, посему адаптируем их под него.
Ну и напоследок классика жанра в качестве примера работы скрипта на одном моём сайте:


UPD от 15.02.2011: Уважаемый Глеб, обновил пост. Ещё подробнее дополню позже. Спасибо за отзыв!

1 comment:

Anonymous said...

приветствую, ничего статья только что т не понятно как все работает а подробней иможно написать или отправить мне на мыло, с уважением ГЛЕБ
qwertis543@gmail.com