В этом учебном пособии подробно рассказывается о настройке формы поиска с поддержкой автозавершения для веб-сайта с Adobe Search and Promotion.
Автозаполнение, или завершение слов, — это функция, при которой форма поиска рекомендует условия поиска на основе слова, которое пользователь начинает вводить.
Настроить автозаполнение
Я включаю индексирование через IndexConnector и включаю пользовательские шаблоны на основе JSON.
Обратитесь к приведенному ниже URL-адресу для получения подробной информации о включении IndexConnector и пользовательских шаблонов.
Пример данных фида XML
<feed xmlns:xs="http://www.w3.org/2001/XMLSchema" version="2.0"> <channel> <title>Product Feed</title> <Item> <link>https://qa.example.com/product-title/p/prod1</link> <title> <![CDATA[Java Title1]]> </title> <description> <![CDATA[<p>Prod1 description</p>]]> </description> <productType>Java</productType> <ProductId>prod1</ProductId> <imageUrl>/content/dam/Images/product/prod1.jpg</imageUrl> </Item> <Item> <link>https://qa.example.com/product-title/p/prod2</link> <title> <![CDATA[Java Title2]]> </title> <description> <![CDATA[<p>Prod2 description</p>]]> </description> <productType>java</productType> <ProductId>prod2</ProductId> <imageUrl>/content/dam/Images/product/prod2.jpg</imageUrl> </Item> <Item> <link>https://qa.example.com/product-title/p/prod3</link> <title> <![CDATA[Java Title3]]> </title> <description> <![CDATA[<p>Prod3 description</p>]]> </description> <productType>java</productType> <ProductId>prod3</ProductId> <imageUrl>/content/dam/Images/product/prod3.jpg</imageUrl> </Item> <Item> <link>https://qa.example.com/product-title/p/prod4</link> <title> <![CDATA[Java Title4]]> </title> <description> <![CDATA[<p>Prod4 description</p>]]> </description> <productType>java</productType> <ProductId>prod4</ProductId> <imageUrl>/content/dam/Images/product/prod4.jpg</imageUrl> </Item> <Item> <link>https://qa.example.com/product-title/p/prod5</link> <title> <![CDATA[Lava Title]]> </title> <description> <![CDATA[<p>Lava description</p>]]> </description> <productType>Lava</productType> <ProductId>prod5</ProductId> <imageUrl>/content/dam/Images/product/prod5.jpg</imageUrl> </Item> </channel> </feed>
Различные области автозаполнения можно настроить в меню «Дизайн» → «Автозаполнение».
Автозавершение настройки
Настройте и настройте параметры, управляющие созданием формы поиска с поддержкой автозаполнения.
Максимальное количество предложений – указывает максимальное количество элементов, отображаемых в списке предложений автозаполнения.
Минимальное количество вводимых символов — указывает количество символов, которое клиент должен ввести в форму автозаполнения поиска, прежде чем она отобразит предложения.
Максимальное количество записей в кэше — указывает максимальное количество ранее запрошенных предложений автозаполнения для кэширования в браузере клиента. Как правило, следует оставить для этого параметра значение по умолчанию, равное 1000. Хотя вы можете полностью отключить кэширование браузера, установив для этого параметра значение 0, делать это не рекомендуется.
Отображать тень —добавляет косметическую тень в список предложений автозаполнения.
Имя формы — указывает атрибут «имя» тега «form» формы поиска с включенным автозаполнением.
ID тега Div — указывает атрибут ID тега «div» формы поиска с включенным автозаполнением.
Идентификатор тега ввода — указывает атрибут ID тега «вход» формы поиска с включенным автозаполнением.
Совпадать только с началом фразы — указывает, следует ли сопоставлять с началом фразы.
Включите необходимые конфигурации и сохраните изменения
Автозаполнение списка слов
Настройте список слов и фраз, которые функция автозаполнения отображает клиенту в качестве предложений.
Период популярных поисковых запросов — управляет периодом времени для включения слов и фраз из недавних поисковых запросов клиента.
Максимальное количество поисковых запросов — регулирует максимальное количество искомых слов и фраз для включения в список слов с автозаполнением. Включены самые популярные слова и фразы, которые также являются самыми популярными.
Имя поля —Каждое имя поля определяет имя одного поля, для которого должны быть включены проиндексированные значения. Используйте + и -, чтобы добавить или удалить имена полей.
Максимальное количество значений —определяет максимальное количество значений поля, разрешенных для выбранного имени поля. Включены лучшие значения, на которые также чаще всего ссылаются.
Добавить эти слова и фразы –автозаполняемый список слов будет заполнен словами и фразами, перечисленными в этой области.
Удалить эти слова и фразы. Записи в этой области не отображаются в списке слов автозаполнения. В этом списке разрешены регулярные выражения. Чтобы указать регулярное выражение в этом списке, начните строку с регулярного выражения, за которым следует один пробел, а затем регулярное выражение. Любые строки в списке слов, соответствующие регулярному выражению, удаляются.
Игнорировать регистр — повторяющиеся записи в списке слов автозаполнения, которые отличаются только прописными/строчными буквами алфавита, удаляются; все записи в списке слов должны быть в нижнем регистре.
Обновление при переиндексации.Автозаполнение списка слов автоматически обновляется после каждой успешной переиндексации учетной записи.
После включения необходимых конфигураций можно просмотреть окончательный список слов — слова включаются из разных источников «Популярные поисковые запросы», «Значения полей», «Добавленные слова и фразы» и «Удаленные слова и фразы».
Автозаполнение CSS
Настройте каскадную таблицу стилей автозаполнения, которую вы хотите использовать. CSS автозаполнения управляет содержимым файла autocomplete_styles.css, который входит в состав формы поиска с поддержкой автозаполнения. Указываемый здесь CSS управляет визуальным представлением списка предложений автозаполнения.
Включите необходимые изменения CSS.
Теперь конфигурации формы готовы, внесите изменения, чтобы они вступили в силу. Форму можно просмотреть, нажав на кнопку «Форма поиска».
Форма поиска HTML теперь может быть интегрирована на веб-сайт, чтобы получить источник формы, нажав «Источник формы».
<html> <!--To apply your custom auto-complete CSS, add the line below (un-commented) within the head section of the page containing this search form. --> <head> <link rel="stylesheet" type="text/css" href="https://content.atomz.com/xxxxxxxxxx/publish/autocomplete_styles.css?sp_css_cache_ver=2" /> </head> <body> <!-- Omniture HTML for Search w/Auto-Complete --> <!-- Do not change the name of the form from "search_form"! --> </br> </br> <div class="yui-skin-sam"> <form name="search_form" method="get" action="http://xxxxxxxxxx.guided.ss-omtrdc.net" target="_blank"> <input type="text" id="q" name="q" /> <input type="submit" value="Search" /> <div id="autocomplete"></div> <input type="hidden" name="sp_cs" value="UTF-8" /> </form> </div> <!-- For maximum performance, place these tags at the bottom of the body section of the page(s) containing this search form. --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/utilities/utilities.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/datasource/datasource-min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/autocomplete/autocomplete-min.js"></script> <script type="text/javascript" src="https://content.atomz.com/xxxxxxxxxx/publish/autocomplete_data.js?sp_js_cache_ver=6"></script> </body> </html>
Значения sp_css_cache_ver и sp_js_cache_ver менялись при каждом изменении автозаполнения.
Обновленные значения CSS и JavaScript можно получить, включив шаблон презентации, включите необходимую конфигурацию в шаблоне презентации на основе типа шаблона, в моем случае я использую тип шаблона JSON.
custom_presentation_json.tmpl (пример с минимальной конфигурацией)
<guided-content-type-header content="application/json" />
<guided-if-query-param-defined gsname="callback" /><guided-query-param gsname="callback" />(</guided-if-query-param-defined>
{
"general" :
{
"query" : "<guided-query-param gsname='q' />",
"total" : "<guided-results-total />",
"page_lower" : "<guided-results-lower>",
"page_upper" : "<guided-results-upper>",
"page_total": "<guided-page-total/>"
},
"search-form":
{
"auto-complete-enabled": "<guided-if-autocomplete>1<guided-else-autocomplete>0</guided-if-autocomplete>",
"css": "<guided-ac-css escape="ijson"/>" ,
"form-content": "<guided-ac-form-content escape="ijson"/>",
"javascript": "<guided-ac-javascript escape="js"/>"
},
"facets" :
[
],
"results" :
[
<guided-results gsname="default">
{
"index" : "<guided-result-index />",
"title" : "<guided-result-field gsname="title" escape="ijson" />",
"productType" : "<guided-result-field gsname="productType" escape="ijson" />"
}<guided-if-not-last>,</guided-if-not-last>
</guided-results>
]
}
<guided-if-query-param-defined gsname="callback">)</guided-if-query-param-defined>
Получить подробности через http://xxxxxxxxxx.guided.ss-omtrdc.net/?do=json
{
"general": {
"query": "",
"total": "223",
"page_lower": "1",
"page_upper": "10",
"page_total": "23"
},
"search-form": {
"auto-complete-enabled": "1",
"css": "<link rel=\"stylesheet\" type=\"text/css\" href=\"//content.atomz.com/xxxxxxxxxx/publish/autocomplete_styles.css?sp_js_param=2\" />\n",
"form-content": "<div id=\"autocomplete\"></div>\n\n",
"javascript": "<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/utilities/utilities.js\"></script>\n<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/datasource/datasource-min.js\"></script>\n<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/autocomplete/autocomplete-min.js\"></script>\n<script type=\"text/javascript\" src=\"//content.atomz.com/xxxxxxxxxx/publish/autocomplete_data.js?sp_js_param=4\"></script>"
},
"facets": [],
"results": [
{
"index": "",
"title": "Book Lava title",
"productType": "Book"
},
{
"index": "",
"title": "Book Lava Title",
"productType": "Book"
},
{
"index": "",
"title": "Book Lava title",
"productType": "Book"
},
{
"index": "",
"title": "Book Lava Title",
"productType": "Book"
},
{
"index": "",
"title": "Book Lava title",
"productType": "Book"
},
{
"index": "",
"title": "Book Lava Title",
"productType": "Book"
},
{
"index": "",
"title": "Book Lava title",
"productType": "Book"
},
{
"index": "",
"title": "Book Lava Title",
"productType": "Book"
},
{
"index": "",
"title": "Book Lava title",
"productType": "Book"
},
{
"index": "",
"title": "Book Lava Title",
"productType": "Book"
}
]
}
Если вы используете пользовательскую форму поиска с пользовательским скриптом Java и CSS, данные автоматического завершения можно получить по указанному ниже URL-адресу JSONP.
https://content.atomz.com/autocomplete/spxx/xx/xx/xx/?callback=jQuery35109061281263500554_1594919810495&query=tit&max_results=7&beginning=1&ignore_apostrophes=1
beginning=0, соответствует данным запроса в любом месте данных автозаполнения.
spxx/xx/xx/xx/ —разделить номер счета по этому шаблону.
<html> <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <head> <body> <script> var accountno='spxxxxxxxx'; var splitan = accountno.substring(0, 4) + "/" + accountno.substring(4, 6) + "/" + accountno.substring(6, 8) + "/" + accountno.substring(8) + "/"; var url = "https://content.atomz.com/autocomplete/" + splitan; var query = 'tit'; var max_results = 7; var beginning = 1; $.ajax({ url : url, data : {query: query, max_results: max_results, beginning: beginning}, dataType : 'jsonp', success : function(data){ if(data.length){ alert(data); $.each(data, function(i, field){ //add the individual data to the auto completion div }); }else{ } } }); </script> </body> <html>
Автозаполнение может использоваться в форме поиска, чтобы рекомендовать условия поиска на основе слова, которое пользователь начинает вводить.
Первоначально опубликовано на https://www.albinsblog.com.
