Поиск Данстана

06 Dec, 2004

Немного оклемался от революции и на глаза попалась классная штука.
Еще одну великолепную идею подарил нам Данстан Орчард(уточнение). Если вы еще не знаете попробуйте поискать на его сайте чего-нибудь.(Enter не нажимать!)

Вот решил разобраться как же такое делать. Вдруг еще кому окажется полезным.

В чем фишка?

Главная фишка этого "живого" поиска в том, что страница не обновляется, когда вы ищете что-нибудь. Как это возможно?

XML HTTP Request

Не буду излагать всю статью. Главное, что этот объект позволяет javascript делать HTTP запросы и получать на них ответ. Это открывает немерено возможностей. И одно из самых главных - мы можем обновлять некоторую информацию на странице без ее(страницы) обновления полностью. Подробнее об использовании этого объекта читайте здесь: Using the XML HTTP Request object (там есть некоторые оговорки с поддержкой, но Мозилла и ИЕ работают)

Не только javascript

Однако одним джаваскриптом тут не обошлось. Ведь надо получить из базы результаты поиска. Поэтому скрипт вызывает php файл поиска и оттуда черпает результаты.

Все вместе

В целом если опустить мелочи касательно задержек, очистки поиска и тому подобного. То можно так представить этот поиск:
  1. Создается объект и примерно такой строкой запрашиваем результат поиска: 
    liveSearchReq.open('GET', processURI+searchInput.value);
    При этом нам надо использовать специальный скрипт для поиска. Он должен возвращать не целую страницу, а лишь тот кусок HTML кода, который мы хотим отобразить сразу. То есть лишь результаты поиска.(без тэгов BODY, HTML)
  2. С помощью DOM создаем DIV в который и пишем эти результаты.
  3. Любуемся "живым" поиском

Наконец

Блог Данстана это просто кладовая замечательных скриптов. Я наверно не раз еще вернусь и почерпну что-нибудь полезное оттуда.

Проблема

Почему то появились глюки с кодировкой. Как я ни гадал ЮТФ и Вин-1251 не подходят. Причем ИЕ кодировку почему то угадывает. А как бороться в других случаях, я так и не смог понять. Быть может кто-то сталкивался с подобным? Откликнитесь в комменты.

Можно посмотреть на поиск на сайте Данстана, но это неинтересно (там не глючит кодировка :) ) Поэтому вот здесь я привожу вариант с глючной кодировкой.
Мой вариант "живого" поиска..
Не все там гладко и со стороны Wordpress'a, когда результат поиска одна заметка этот гад (:)) делает переадресацию и выводит и HTML и BODY тэг. Но это не проблема. А вот кодировка...

Уточнение

Восстанавливая справедливость.
Авторство данной техники принадлежит Christian Stocker.
И подробнее о ней можно прочитать здесь
http://blog4.bitflux.ch/wiki/LiveSearch

10 комментариев к “Поиск Данстана”

1.Андрюс | 07 Dec, 2004
Кроме поиска у него там масса замечательных вещей показывающихся в слоях без перезагрузки. Вот это меню, например: nv|bm|br*. Ну, а "Panorama information" это вообще нечто! Ты читал как это работает?
2.Tim | 07 Dec, 2004
XmlHttpRequest будет работать и в Opera с версии 7.6. В снепшотах уже работает. А еще у Дунстана меня восхитили подсказки к поиску. Песня.
3.kukutz | 07 Dec, 2004
Начнём с того, что LiveSearch придумал Christian Stocker из Bitflux. Достаточно поискать это слово в Google. Продолжим тем, что проблему с кодировкой мне удалось решить одним-единственным способом: передавать русские буквы закодированными. UUE, Base64, escape() - выбирайте сами.
4.akella | 07 Dec, 2004
Спасибо за уточнение. Как то даже не подумал об авторстве. Конечно читал про погоду. Яркий пример соединения нескольких технологий. А как вам комментарии на его блоге? Это даже не песня это просто хит. Да и вообще все это сочетание наворотов смотрится довольно гармонично.
5.Андрюс | 07 Dec, 2004
да, ссылки в комментариях, кто кому говорит это круто. Но всЄ же по сравнению с коментариями Ливжурнала ничто не сравнится. К тому же какой-то он не добрый чувак, никому скриптов не даЄт. В вэбе обычно всЄ тяготеет к open source. Так быстрее всЄ развивается, люди развивают и дополняют идеи друг друга.
6.edgy | 08 Dec, 2004
а как это сервер грузит? там же на каждую букву идет запрос?
7.akella | 08 Dec, 2004
Извини, не совсем понятно, о чем ты? Результаты поиска? Результаты поиска воспринимаются как обычный текст (хотя там и намешаны тэги). После чего через innerHTML заменяют содержимое DIVa этим текcтом.
8.edgy | 09 Dec, 2004
сам поиск. я так понимаю, что когда пользователь набирает слово, скрипт при появлении каждой новой буквы отправляет запрос на поиск получившегося слова. то есть при поиске слова из 7 букв будет выполнено семь запросов к серверу, вместо одного при обычном поиске. Вообще, ИМО, это из разряда свистков и гудков. Я, как и многие, набираю слово целиком, и нажимаю Enter, а не печатаю букву по одной и не смотрю что будет.
9.akella | 09 Dec, 2004
Какие то глюки с кодировкой сорри. Все не совсем так. Там есть задержка. То есть если при наборе ключевого слова вы сделаете перерыв более чем на 2 секунды, то запрос пойдет. Иначе нет. То есть такой вариант продуман. Поэтому это совсем не мешает. Более того, если набрать слово и нажать ентер, то этот поиск сработает как и всегда.
10.graymur | 18 Feb, 2005
http://dklab.ru/chicken/nablas/41.html