Скачать swiftype search jquery - swiftype search jquery Скачать Исходный код

swiftype search jquery

Другой исходный код

v1.1.0

Скачать

Эластичный логотип поиска по сайту

Собственный плагин jQuery Elastic Site Search для поиска по веб-сайтам.

Содержание

Начиная
Использование
Руководство по настройке
Часто задаваемые вопросы
Способствовать
Лицензия

Начиная ?

Требования:

Аккаунт поиска по сайту. Зарегистрируйтесь на сайте Swiftype.com.
Поисковая система по сайту с некоторыми данными.

Включите в заголовок вашей веб-страницы следующее:

последняя версия jQuery
плагин jQuery Swiftype Search
(необязательно) таблица стилей Swiftype Search

Все вместе это должно выглядеть так:

 < script type =" text/javascript " src =" https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > </ script >
< script type =" text/javascript " src =" jquery.swiftype.search.js " > </ script >
< link type =" text/css " rel =" stylesheet " href =" search.css " media =" all " />

Примечание. Этот клиент был разработан только для конечных точек API Elastic Site Search. Дополнительную информацию можно найти в документации по API Elastic Site Search.

Использование

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

 < form >
  < input type =" text " placeholder =" Search " id =" st-search-input " />
</ form >
< div id =" st-results-container " > </ div >

Примените метод Swiftype к существующему полю ввода поиска в форме на вашей веб-странице и предоставьте контейнер для результатов. Например, добавьте его в поле ввода поиска с идентификатором st-search-input следующим образом:

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  resultContainingElement : '#st-results-container' ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

Обязательно измените показанный выше атрибут engineKey , чтобы он соответствовал атрибуту, назначенному вашей поисковой системе Swiftype. Если вы используете веб-интерфейс, ключ поисковой системы указан на первой странице вашей панели управления.

Руководство по настройке

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

Давайте рассмотрим пример, который делает все это. В этом примере предположим, что вы выполнили руководство по быстрому запуску нашего Ruby Gem и теперь у вас есть данные для книжного магазина, проиндексированные в вашей поисковой системе.

Изменение количества результатов на странице

Чтобы указать количество результатов на странице, используйте атрибут perPage .

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  engineKey : 'jaDGyzkR6iYHkfNsPpNK' ,
  perPage : 20
} ) ;

Максимальное значение, которое будет учитываться API, равно 100.

Возврат соответствующего фрагмента выделения

Любые поля, которые запрашиваются во время поиска, возвращают верхнее совпадение (если таковое имеется) в свойстве выделения результатов. Все фрагменты в этой форме содержат HTML-объекты из закодированного исходного текста. Фактическое выделение определяется с помощью (некодированных) тегов <em> .

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

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
  highlightFields : { 'books' : { 'body' : { 'size' : 300 , 'fallback' : true } } }
} ) ;

Параметр highlightFields принимает хэш, содержащий поля, которые вы хотите выделить для каждого объекта каждого типа документа. Для каждого поля укажите size как максимальное количество символов, которое можно включить во фрагмент. Установите для fallback значение true, чтобы принудительно включить невыделенный фрагмент, если для этого поля выделение недоступно.

Дополнительный пример highlightFields см. в файле custom.html.

Получение только указанных вами полей

Чтобы указать поля, которые вы хотите вернуть из API, задайте для атрибута fetchFields хэш, содержащий массив со списком полей, которые вы хотите вернуть для каждого типа документа. Например, если у вас есть индексированные поля title , genre published_on для каждого документа, вы можете вернуть их следующим образом:

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

Эти дополнительные поля будут возвращены с каждым элементом, и к ним можно получить доступ в функции рендеринга, как показано в следующем разделе.

Настройка дисплея

Теперь, когда у вас есть больше данных для каждого элемента результата, вам нужно настроить функцию рендеринга элементов для их использования.

Функция рендеринга по умолчанию показана ниже:

 var defaultRenderFunction = function ( document_type , item ) {
  return '<div class="st-result"><h3 class="title"><a href="' + item [ 'url' ] + '" class="st-search-result-link">' + item [ 'title' ] + '</a></h3></div>' ;
} ;

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

 var customRenderFunction = function ( document_type , item ) {
  var out = '<a href="' + item [ 'url' ] + '" class="st-search-result-link">' + item [ 'title' ] + '</a>' ;
  return out . concat ( '<p class="genre">' + item [ 'genre' ] + '</p>' ) ;
} ;

Теперь просто установите для атрибута renderFunction в словаре параметров значение customRenderFunction , чтобы наш плагин использовал вашу функцию для рендеринга результатов:

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

Ограничение соответствия определенным полям

По умолчанию библиотека поиска Swiftype сопоставляет отправленный запрос с любой string или text полем, проиндексированным для ваших документов. Поэтому, если вы хотите, чтобы он соответствовал только записям, например, в поле title , вы можете указать опцию searchFields :

 $('#st-search-input').swiftypeSearch({
  renderFunction: customRenderFunction,
  fetchFields: {'books': ['title','genre','published_on']},
  searchFields: {'books': ['title']},
  engineKey: 'jaDGyzkR6iYHkfNsPpNK'
});

Подобно опции fetchFields , searchFields принимает хэш, содержащий массив полей для каждого document_type, которому вы хотите, чтобы пользовательский запрос соответствовал.

Указание дополнительных условий запроса

Теперь предположим, что вы хотите, чтобы в результатах отображались только книги художественного genre , находящиеся в наличии in_stock . Чтобы ограничить результаты поиска, вы можете передать в API поиска дополнительные условия запроса, указав их в виде словаря в поле filters . Несколько предложений в поле фильтров объединяются логикой AND:

 $ ( '#st-search-input' ) . swiftypeSearch ( {
  renderFunction : customRenderFunction ,
  fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
  filters : { 'books' : { 'genre' : 'fiction' , 'in_stock' : true } } ,
  searchFields : { 'books' : [ 'title' ] } ,
  engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;

Запуск нового запроса

В некоторых случаях вам может потребоваться вручную запустить новый поиск. Для этого можно использовать следующий метод. Примером такого случая может быть ситуация, когда пользователь решает применить фильтр и необходимо выполнить новый запрос.

 Swiftype.reloadResults();

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ ?

Могу ли я использовать это с плагином автозаполнения Swiftype?

Да! Если вам нужна функция автозаполнения, воспользуйтесь плагином автозаполнения Swiftype.

Куда я могу сообщить о проблемах с клиентом?

Если что-то не работает должным образом, пожалуйста, откройте проблему.

Где я могу узнать больше о поиске по сайту?

Лучше всего прочитать документацию.

Куда еще я могу обратиться за помощью?

Вы можете посетить форумы сообщества Elastic Site Search.

Способствовать

Мы приветствуем участников проекта. Прежде чем начать, пара замечаний...

Прежде чем открывать запрос на включение, создайте задачу, чтобы обсудить объем вашего предложения.
Пожалуйста, пишите простой код и краткую документацию, если это необходимо.