This tutorial explains the details on configuring the Auto Completion enabled Search form to a website with Adobe Search and promote.
Autocomplete, or word completion, is a feature in which the search form recommends the search terms based on the word user beginning to type.
Configure auto-completion
I am enabling the indexing through IndexConnector and enabling custom JSON based templates.
Refer the below URL for details on enabling IndexConnector and the custom templates.
How to configure Navigation Facet in Adobe Search and Promote?
The Facets can be used to customize your presentation layer and provide your users with a Guided Search that lets them…
medium.com
Sample XML feed data
"); background-position: 0px calc(1em + 1px); background-repeat: repeat-x; background-size: 1px 1px; box-sizing: inherit; text-decoration-line: none;' target="_blank">http://www.w3.org/2001/XMLSchema" version="2.0"> Product Feed "); background-position: 0px calc(1em + 1px); background-repeat: repeat-x; background-size: 1px 1px; box-sizing: inherit; text-decoration-line: none;' target="_blank">https://qa.example.com/product-title/p/prod1 <br style="box-sizing: inherit;"><br style="box-sizing: inherit;">
Prod1 description]]>Java prod1 /content/dam/Images/product/prod1.jpg "); background-position: 0px calc(1em + 1px); background-repeat: repeat-x; background-size: 1px 1px; box-sizing: inherit; text-decoration-line: none;' target="_blank">https://qa.example.com/product-title/p/prod2 <br style="box-sizing: inherit;"><br style="box-sizing: inherit;">
Prod2 description]]>java prod2 /content/dam/Images/product/prod2.jpg "); background-position: 0px calc(1em + 1px); background-repeat: repeat-x; background-size: 1px 1px; box-sizing: inherit; text-decoration-line: none;' target="_blank">https://qa.example.com/product-title/p/prod3 <br style="box-sizing: inherit;"><br style="box-sizing: inherit;">
Prod3 description]]>java prod3 /content/dam/Images/product/prod3.jpg "); background-position: 0px calc(1em + 1px); background-repeat: repeat-x; background-size: 1px 1px; box-sizing: inherit; text-decoration-line: none;' target="_blank">https://qa.example.com/product-title/p/prod4 <br style="box-sizing: inherit;"><br style="box-sizing: inherit;">
Prod4 description]]>java prod4 /content/dam/Images/product/prod4.jpg "); background-position: 0px calc(1em + 1px); background-repeat: repeat-x; background-size: 1px 1px; box-sizing: inherit; text-decoration-line: none;' target="_blank">https://qa.example.com/product-title/p/prod5 <br style="box-sizing: inherit;"><br style="box-sizing: inherit;">
Lava description]]>Lava prod5 /content/dam/Images/product/prod5.jpg
The various areas of Auto-Complete can be configured through Design → Auto-Complete
Auto-Complete Setup
Configure and setup the options that control the generation of the auto-complete enabled search form
Maximum suggestions — Specifies the maximum number of items to display in the auto-complete suggestions list.
Minimum input characters — Specifies the number of characters that a customer must type into the auto-complete search form before it displays suggestions.
Maximum cache entries — Specifies the maximum number of previously requested auto-complete suggestions to cache in the customer’s browser. Generally, you should leave this setting at the default of 1000. While you can completely disable browser caching by setting this option to 0, it is not recommended.
Display shadow — Adds a cosmetic drop-shadow to the auto-complete suggestions list.
Form name — Specifies the “name” attribute of the auto-complete enabled search form’s “form” tag.
Div tag ID — Specifies the ID attribute of the auto-complete enabled search form’s “div” tag.
Input tag ID — Specifies the ID attribute of the auto-complete enabled search form’s “input” tag.
Match only at beginning of phrase — Specifies whether to match the with the beginning of phrase.
Enable the required configurations and save changes
Auto-Complete Word List
Configure the list of words and phrases that Auto-Complete displays to a customer as suggestions.
Popular Searches Period — Controls the time period for the inclusion of words and phrases from a customer’s recent searches.
Maximum Search Count — Controls the maximum number of searched words and phrases to include in the auto-complete word list. The top words and phrases, which are also the most popular, are included.
Field Name — Each field name defines the name of one field for which to include indexed values. Use + and — to add or remove field names.
Maximum Value Count — Defines the maximum count of field values that are allowed for the selected field name. The top values, which are also the most referenced, are included.
Add these words and phrases — The auto-complete word list is populated with the words and phrases that are listed in this area
Remove these words and phrases — Entries in this area are not displayed in the auto-complete word list.Regular expressions are allowed in this list. To specify a regular expression in this list, start the line with regexp followed by a single space, followed by the regular expression. Any lines in the word list that match the regular expression are removed
Ignore Case — Duplicate entries in the auto-complete word list that differ only by alphabetic uppercase/lowercase are removed; all word list entries are forced to lowercase.
Update on Re-Index — Auto-complete word list is automatically regenerated after each successful account re-index.
After enabling the the required configurations the final word list can be previewed — the words are included from different sources “Popular Searches”, “Field Values”, “Added Words & Phrases” and “Removed Words & Phrases”
Auto-Complete CSS
Configure the auto-complete cascading style sheet that you want to use. Auto-Complete CSS controls the content of autocomplete_styles.css, which is included as a part of the auto-complete enabled search form.The CSS you specify here controls the visual presentation of the auto-complete suggestion list.
Enable the required CSS changes.
Now the form configurations ready, push the changes to live. The form can be previewed by clicking on “Search Form”
The search form HTML can be integrated to website now, retrieve the form source by clicking on “Form Source”
"); background-position: 0px calc(1em + 1px); background-repeat: repeat-x; background-size: 1px 1px; box-sizing: inherit; text-decoration-line: none;' target="_blank">https://content.atomz.com/xxxxxxxxxx/publish/autocomplete_styles.css?sp_css_cache_ver=2" />
"); background-position: 0px calc(1em + 1px); background-repeat: repeat-x; background-size: 1px 1px; box-sizing: inherit; text-decoration-line: none;' target="_blank">http://xxxxxxxxxx.guided.ss-omtrdc.net" target="_blank">
"); background-position: 0px calc(1em + 1px); background-repeat: repeat-x; background-size: 1px 1px; box-sizing: inherit; text-decoration-line: none;' target="_blank">https://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/utilities/utilities.js">
"); background-position: 0px calc(1em + 1px); background-repeat: repeat-x; background-size: 1px 1px; box-sizing: inherit; text-decoration-line: none;' target="_blank">https://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/datasource/datasource-min.js">
"); background-position: 0px calc(1em + 1px); background-repeat: repeat-x; background-size: 1px 1px; box-sizing: inherit; text-decoration-line: none;' target="_blank">https://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/autocomplete/autocomplete-min.js">
"); background-position: 0px calc(1em + 1px); background-repeat: repeat-x; background-size: 1px 1px; box-sizing: inherit; text-decoration-line: none;' target="_blank">https://content.atomz.com/xxxxxxxxxx/publish/autocomplete_data.js?sp_js_cache_ver=6">
The values of
