04 марта 2011 :Как настроить Opensearch

Сегодня мы прикрутили к блогу поиск. Сам модуль поиска в движке был, но он искал только в обычных страницах и каталоге, а по новостям не искал. Сейчас ищет - это здорово. Адрес http://usabili.ru/search/news/. Будем считать это подарком бложику на двухлетие.

А теперь собственно обещанная вам 23 февраля статья.

Сейчас я поведаю вам о технологии Opensearch, с которой я играюсь уже неделю. Эта технология позволяет для любого сайта содержащего поиск, интегрироваться в панель поиска браузера. Особенность также в том, что поиск можно не только интегрировать как саму форму, но и обозначить страницу с которой можно загружать поисковые подсказки (suggestions). Например в Firefox это выглядит так:

Для того чтобы пользователь мог добавить ваш поиск в форму поиска браузера - вам нужно сначала создать xml-файл описывающий opensearch параметры. У меня на сайте этот файл размещён тут  http://usabili.ru/opensearch_news.xml.

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <ShortName>Usabili.ru</ShortName>
    <Description>Блог о веб-разработке</Description>
    <Image width="16" height="16" type="image/vnd.microsoft.icon">http://usabli.ru/favicon.ico</Image>
    <Url type="text/html" template="http://usabili.ru/search/news/?txt={searchTerms}"/>
    <Url type="application/x-suggestions+json" method="GET" template="http://usabili.ru/opensearch/news/?txt={searchTerms}"/>
    <InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

В данном случае http://usabili.ru/search/news/?txt= это адрес поиска на сайте, методом get. А http://usabili.ru/opensearch/news/?txt= адрес подсказок, которые возникают при набирании текста. Похожее поведение можно видеть в поисках яндекса и гугла.

Тег для добавления в файрфокс

Для того чтобы можно было добавить ваш поиск Файрфоксом - вам нужно прописать в код страниц следующий элемент

<link rel="search" href="/opensearch_news.xml" title="Usabili.ru" type="application/opensearchdescription+xml">

браузеры поддерживающие автоопределение opensearch форм - поймут это.

Добавление скриптом

Вы также можете сделать кнопку, которая будет добавлять поиск в браузер пользователя

<script>
/**
 * Install a search engine (opensearch)
 * Returns false in case of success (sic!) because that will keep the file link
 * from being followed.
 */
function addEngine(engineURL) {
    if (window.external && ("AddSearchProvider" in window.external)) {
        window.external.AddSearchProvider(engineURL);
        return false;
    } else {
        alert(error_opensearch_unsupported);
        return true;
    }
}
</script>

<a href="#" onclick="addEngine('http://usabli.ru/opensearch.xml')">Добавить opensearch в браузер</a>

Поисковые подсказки, не являются обязательными в Opensearch, а просто являются полезным дополнением. Подробную спецификацию можно найти по этому адресу: http://www.opensearch.org/Specifications/OpenSearch/Extensions/Suggestions/1.1

Формат JSON поисковых подсказок:

Формат вывода

Содержимое ответа должно быть в виде JavaScript Object Notation, как яваскриптовый двумерный массив.

Содержание

Поисковые подсказки (или предложения) должны быть в виде упорядоченного множества значений. Четыре элемента должны идти в следующем порядке:

• Строка запроса
• Массив подсказок
• Массив описаний к этим подсказкам
• массив ссылок

Префикс подсказок

Одиночный элемент, повторяющий поисковый запрос. Поисковый клиент может сверить это значение с тем что он запрашивал.

Обязателен

пример:

 "doctype"

Подсказки

Список подходящих дополнений для данного поиска. Может использоваться как значение параметра searchTerms для последующих запросов.

Обязателен

пример:

    ["Капля статистики: Doctype",
	"Про DOCTYPE и стандарты html.",
	"Статистика использования Doctype'ов в рунете",
	"Сбор doctype статистики за декабрь 2009",
	"Сбор doctype статистики за декабрь 2010",
	"Повтор сбора веб-статистики.",
	"Доктайп html5 и валидатор w3c",
	"В блоге включены комментарии",
	"Не используйте доктайп XHTML, если у вас HTML",
	"Вариации валидного xhtml"]

Описания

Список человеко-понятных значений  которые содержат дополнительную информацию или контекст данных подсказок.

Не обязателен

пример:

    ["25 апреля 2009",
	"20 марта 2009",
	"07 августа 2009",
	"01 декабря 2009",
	"28 декабря 2010",
	"16 июня 2009",
	"23 апреля 2009",
	"12 июня 2009",
	"19 мая 2009",
	"30 июня 2009"],

Массив ссылок

Список URL-адресов, которые должны быть использованы поисковым клиентом при выборе соответствующей позиции в списке подсказок.

Не обязателен

пример:

    ["http://usabili.ru/news/2009/04/25/doctype_statistic.html",
	"http://usabili.ru/news/2009/03/20/doctype.html",
	"http://usabili.ru/news/2009/08/07/runet_stat_doctype.html",
	"http://usabili.ru/news/2009/12/01/web_statistic.html",
	"http://usabili.ru/news/2010/12/28/web_statistic_2010.html",
	"http://usabili.ru/news/2009/06/16/web_statistic.html",
	"http://usabili.ru/news/2009/04/23/html5_doctype.html",
	"http://usabili.ru/news/2009/06/12/comments_added.html",
	"http://usabili.ru/news/2009/05/19/xhtml_vs_html.html",
	"http://usabili.ru/news/2009/06/30/valid_xhtml_variants.html"]

Пример

Ниже, полный пример поисковой подсказки в формате JSON:

["doctype",
    ["Капля статистики: Doctype",
	"Про DOCTYPE и стандарты html.",
	"Статистика использования Doctype'ов в рунете",
	"Сбор doctype статистики за декабрь 2009",
	"Сбор doctype статистики за декабрь 2010",
	"Повтор сбора веб-статистики.",
	"Доктайп html5 и валидатор w3c",
	"В блоге включены комментарии",
	"Не используйте доктайп XHTML, если у вас HTML",
	"Вариации валидного xhtml"],
    ["25 апреля 2009",
	"20 марта 2009",
	"07 августа 2009",
	"01 декабря 2009",
	"28 декабря 2010",
	"16 июня 2009",
	"23 апреля 2009",
	"12 июня 2009",
	"19 мая 2009",
	"30 июня 2009"],
    ["http://usabili.ru/news/2009/04/25/doctype_statistic.html",
	"http://usabili.ru/news/2009/03/20/doctype.html",
	"http://usabili.ru/news/2009/08/07/runet_stat_doctype.html",
	"http://usabili.ru/news/2009/12/01/web_statistic.html",
	"http://usabili.ru/news/2010/12/28/web_statistic_2010.html",
	"http://usabili.ru/news/2009/06/16/web_statistic.html",
	"http://usabili.ru/news/2009/04/23/html5_doctype.html",
	"http://usabili.ru/news/2009/06/12/comments_added.html",
	"http://usabili.ru/news/2009/05/19/xhtml_vs_html.html",
	"http://usabili.ru/news/2009/06/30/valid_xhtml_variants.html"]]

 Разумеется данные подсказки можно использовать не только в браузере, но и, например через яваскрипт дополнять поле поиска на сайте. Например у меня получилось вот так:

Надеюсь вам понравилась статья. В следующей я расскажу вам как сделать такой же яваскрипт для обработки поле поиска как у меня =)