Поиск по сайту — функция, безусловно, очень важная, особенно для больших ресурсов, на которых найти нужную информацию бывает не так просто. Многие современные CMS содержат готовые компоненты для построения системы поиска. Но даже если такого компонента нет под рукой, не надо отчаиваться — крупные поисковые сервисы (в частности, Google) предоставляют API на базе JavaScript и AJAX, которые можно легко подключить к любому сайту.

Описание API поиска от Google можно найти здесь. На первый взгляд все выглядит предельно просто: нужно разместить на странице скрипт из 5-10 строк кода, и ура — вы получаете готовую мощную систему поиска по сайту. Но на мой взгляд, тут есть существенные недостатки — способ, рекомендуемый Google (использование объекта google.search.searchControl), формирует несемантичную и явно избыточную HTML-разметку, которая к тому же «обвешана» дополнительнымы CSS-правилами, которые подойдут не каждому сайту.

Поэтому я хочу описать способ реализации поиска по сайту с использованием этого же API, но на более низком уровне, что позволяет формировать любую HTML-разметку и украшать ее собственными стилями. Для удобства работы с DOM я также буду использовать фреймворк jQuery. Сразу оговорюсь, что я не буду подробно расписывать назначение и возможности используемых объектов из API, об этом можно прочесть в документации. Я только покажу один, достаточно универсальный, вариант использования этих объектов в контексте произвольного сайта. Безусловно, приведенный ниже код — это не вселенская истина, а только лишь основа для реализации собственного решения.

Читать дальше »

Метки: google api, javascript, jquery