Tuesday, August 4, 2020

How to Enable Proximity Search in Adobe Search and Promote | Location-aware search with Adobe Search and Promote

How to Enable Proximity Search in Adobe Search and Promote | Location-aware search with Adobe Search and Promote


This tutorial explains the details on enabling Proximity Search in Adobe Search and Promote.

Proximity Search

Proximity Search lets you associate a unique location with any page on your website, and then search and sort results by proximity (distance) from a given location.

For example, suppose you have populated pages on your website with United States postal ZIP code metadata such as the following:

<meta name="zipcode" content="84057">

After indexing your site, you perform the following search:

...&sp_q_location_1=84057&sp_x_1=zip&sp_q_max_1=100&sp_s=zip_proximity

The result set contains any documents located within 100 miles of ZIP code 84057, sorted in ascending order of distance from this ZIP code.

The telephone area codes also can be used for United States locations. Or, you can use latitude/longitude pairs to specify locations in your site metadata and in your search criteria. The location type is automatically determined from the form of the data that is provided.

Three-digit location values (“DDD”, where each “D” represents a decimal digit from 0–9) are treated as a United States telephone area code.

Five or five-dash-four digit location values (“DDDDD” or “DDDDD-DDDD”) are treated as a United States postal ZIP code.

Location values in the exact form of “±DD.DDDD±DDD.DDDD” are treated as a latitude/longitude pair. The first signed numeric value specifies latitude and the second signed numeric value represents longitude.

If you specify a positive latitude value, or positive longitude value, or both, the “+” character in the URL must be encoded as %2b. Otherwise, the “+” is interpreted as space, and the value is not recognized as a valid location.

When you search by proximity there is a special “proximity output field” created for that search. The field is populated with the relative distance between the location that is specified in the search criteria, and the location that is associated with each search result. This special field is named for the location-type field that is used in the search criteria with “_proximity” added to the end.

In the example search above, the results are sorted in ascending order of “zip_proximity.” That is the distance between the specified ZIP code (84057) and each result’s “zip” field location. You can also use this special “proximity output field” to display the relative distance for each search result, in either kilo meters or miles, using the Search template tag.

Configure Proximity Search

Let us now enable the proximity search in Adobe Search and Promote, I am going to use the IndexConnector to index the documents. Refer to the below URL for details on enabling IndexConnector and custom presentation and transport templates.

Proximity Search with zip code

Let us now enable the proximity search with zip proximity, I am going to index the below sample feed data through Index Connector

<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>
<zipcode>55123</zipcode>
<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>
<zipcode>92307</zipcode>
<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>
<zipcode>55103</zipcode>
<imageUrl>/content/dam/Images/product/prod3.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>
<zipcode>55109</zipcode>
<ProductId>prod5</ProductId>
<imageUrl>/content/dam/Images/product/prod5.jpg</imageUrl>
</Item>
</channel>
</feed>

Enable the metadata configuration for new zipcode field — Settings →Metadata →Definitions

proximity-search-in-adobe-search-and-promote

Configure the new field in IndexConnector — Settings →Crawling —>Index Connector

proximity-search-in-adobe-search-and-promote

Modify the presentation and Transports templates to include the “proximity output field" and if required metadata field zip code to the response, sample custom presentation & transports templates below (modify the corresponding templates used)

custom_backend_json.tpl (Transport)

<search-content-type-header charset="UTF-8">
{
"general": {
"query" : "<search-query />",
"total" : "<search-total />",
"lower" : "<search-lower />",
"upper" : "<search-upper />"
},

"facets" : [
{
"name" : "n1",
"values" : [<search-field-value-list name="n1" quotes="yes" data="values" sortby="values" encoding="json" />],
"counts" : [<search-field-value-list name="n1" quotes="no" data="results" sortby="values" />]
}
],
"results" : [
<search-results>
{
"fields" :
[
{
"name" : "mdi",
"value" : "<search-display-field name="mdi" length="500" encoding="json" />"
},
{
"name" : "title",
"value" : "<search-display-field name="title" encoding="json" />"
},
{
"name" : "productType",
"value" : "<search-display-field name="productType" encoding="json" />"
},
{
"name" : "zip",
"value" : "<search-display-field name="zip" encoding="json" />"
},
{
"name" : "relative_distance",
"value" : "<search-display-field name="zip_proximity" encoding="json" />"
}

]
}
<search-if-not-last>,</search-if-not-last>
</search-results>
]
}

custom_presentation_json.tmpl (Presentation)

<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/>"
},
"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" />",
"zip" : "<guided-result-field gsname="zip" escape="ijson" />",
"relative_distance" : "<guided-result-field gsname="relative_distance" escape="ijson" />"

}<guided-if-not-last>,</guided-if-not-last>
</guided-results>
]
}
<guided-if-query-param-defined gsname="callback">)</guided-if-query-param-defined>

Run the Full Index now and execute the query by specifying the distance

http://xxxxxxxx.guided.ss-omtrdc.net/?do=json&sp_q_location_1=55123&sp_x_1=zip&sp_q_max_1=10&sp_s=zip_proximity

The result contains any documents located within 10 miles of ZIP code 55123, sorted in ascending order of distance from this ZIP code.

{
"general": {
"query": "",
"total": "1",
"page_lower": "1",
"page_upper": "1",
"page_total": "1"
},
"facets": [],
"results": [
{
"index": "",
"title": "Java Title1",
"productType": "Java",
"zip": "55123",
"relative_distance": "0.00"

}
]
}

http://xxxxxxxx.guided.ss-omtrdc.net/?do=json&sp_q_location_1=55123&sp_x_1=zip&sp_q_max_1=20&sp_s=zip_proximity

The result contains any documents located within 20 miles of ZIP code 55123, sorted in ascending order of distance from this ZIP code.

{
"general": {
"query": "",
"total": "3",
"page_lower": "1",
"page_upper": "3",
"page_total": "1"
},
"facets": [],
"results": [
{
"index": "",
"title": "Java Title1",
"productType": "Java",
"zip": "55123",
"relative_distance": "0.00"

},
{
"index": "",
"title": "Java Title3",
"productType": "java",
"zip": "55103",
"relative_distance": "10.98"

},
{
"index": "",
"title": "Lava Title",
"productType": "Lava",
"zip": "55109",
"relative_distance": "15.51"

}
]
}

http://xxxxxxxx.guided.ss-omtrdc.net/?do=json&sp_q_location_1=55123&sp_x_1=zip&sp_q_max_1=1500&sp_s=zip_proximity

The result contains any documents located within 1500 miles of ZIP code 55123, sorted in ascending order of distance from this ZIP code.

{
"general": {
"query": "",
"total": "4",
"page_lower": "1",
"page_upper": "4",
"page_total": "1"
},
"facets": [],
"results": [
{
"index": "",
"title": "Java Title1",
"productType": "Java",
"zip": "55123",
"relative_distance": "0.00"

},
{
"index": "",
"title": "Java Title3",
"productType": "java",
"zip": "55103",
"relative_distance": "10.98"

},
{
"index": "",
"title": "Lava Title",
"productType": "Lava",
"zip": "55109",
"relative_distance": "15.51"

},
{
"index": "",
"title": "Java Title2",
"productType": "java",
"zip": "92307",
"relative_distance": "1448.84"

}
]
}

Proximity Search with telephone area code

The proximity search can also be enabled through 3 digit telephone area code.

Sample Feed data

<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>
<zipcode>55123</zipcode>
<areacode>218</areacode>
<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>
<zipcode>92307</zipcode>
<areacode>320</areacode>
<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>
<zipcode>55103</zipcode>
<areacode>507</areacode>
<imageUrl>/content/dam/Images/product/prod3.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>
<zipcode>55109</zipcode>
<areacode>612 </areacode>
<ProductId>prod5</ProductId>
<imageUrl>/content/dam/Images/product/prod5.jpg</imageUrl>
</Item>
</channel>
</feed>

Enable the metadata configuration for new areacode field — Settings →Metadata →Definitions

proximity-search-in-adobe-search-and-promote

Configure the new field in IndexConnector — Settings →Crawling →Index Connector

proximity-search-in-adobe-search-and-promote

Modify the presentation and Transports templates to include the “proximity output field” and if required metadata field area code to the response, sample custom presentation & transports templates below (modify the corresponding templates used)

custom_backend_json.tpl (Transport)

<search-content-type-header charset="UTF-8">
{
"general": {
"query" : "<search-query />",
"total" : "<search-total />",
"lower" : "<search-lower />",
"upper" : "<search-upper />"
},

"facets" : [
{
"name" : "n1",
"values" : [<search-field-value-list name="n1" quotes="yes" data="values" sortby="values" encoding="json" />],
"counts" : [<search-field-value-list name="n1" quotes="no" data="results" sortby="values" />]
}
],
"results" : [
<search-results>
{
"fields" :
[
{
"name" : "mdi",
"value" : "<search-display-field name="mdi" length="500" encoding="json" />"
},
{
"name" : "title",
"value" : "<search-display-field name="title" encoding="json" />"
},
{
"name" : "productType",
"value" : "<search-display-field name="productType" encoding="json" />"
},
{
"name" : "zip",
"value" : "<search-display-field name="zip" encoding="json" />"
},
{
"name" : "relative_distance",
"value" : "<search-display-field name="zip_proximity" encoding="json" />"
},
{
"name" : "areacode",
"value" : "<search-display-field name="areacode" encoding="json" />"
},
{
"name" : "relative_distance_areacode",
"value" : "<search-display-field name="areacode_proximity" encoding="json" />"
}

]
}
<search-if-not-last>,</search-if-not-last>
</search-results>
]
}

custom_presentation_json.tmpl (Presentation)

<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/>"
},
"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" />",
"zip" : "<guided-result-field gsname="zip" escape="ijson" />",
"relative_distance" : "<guided-result-field gsname="relative_distance" escape="ijson" />",
"areacode" : "<guided-result-field gsname="areacode" escape="ijson" />",
"relative_distance_areacode" : "<guided-result-field gsname="relative_distance_areacode" escape="ijson" />"
}<guided-if-not-last>,</guided-if-not-last>
</guided-results>
]
}
<guided-if-query-param-defined gsname="callback">)</guided-if-query-param-defined>

Run the Full Index now and execute the query by specifying the distance

http://xxxxxx.guided.ss-omtrdc.net/?do=json&sp_q_location_1=218&sp_x_1=areacode&sp_q_max_1=200&sp_s=areacode_proximity

The result contains any documents located within 200 miles of area code 218, sorted in ascending order of distance from this area code.

{
"general": {
"query": "",
"total": "3",
"page_lower": "1",
"page_upper": "3",
"page_total": "1"
},
"facets": [],
"results": [
{
"index": "",
"title": "Java Title1",
"productType": "Java",
"zip": "55123",
"relative_distance": "",
"areacode": "218",
"relative_distance_areacode": "0.00"

},
{
"index": "",
"title": "Java Title2",
"productType": "java",
"zip": "92307",
"relative_distance": "",
"areacode": "320",
"relative_distance_areacode": "125.02"

},
{
"index": "",
"title": "Lava Title",
"productType": "Lava",
"zip": "55109",
"relative_distance": "",
"areacode": "612",
"relative_distance_areacode": "171.86"

}
]
}

The search can also be enabled based on the latitude/longitude by enabling metadata with latitude/longitude value in “±DD.DDDD±DDD.DDDD” format and searching with the same value(e.g. +44.8041, -93.1668).

The proximity search will associate the location data to the search records and allows us to search the records based on the relative location of the records.

References




Thursday, July 16, 2020

How to configure Auto Completion enabled search form with Adobe Search and Promote?

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.

adobe-search-and-promote-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.

Sample XML feed data

<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>

The various areas of Auto-Complete can be configured through Design → Auto-Complete

Image for post

Configure and setup the options that control the generation of the auto-complete enabled search form

adobe-search-and-promote-auto-completion

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

Configure the list of words and phrases that Auto-Complete displays to a customer as suggestions.

adobe-search-and-promote-auto-completion

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”

adobe-search-and-promote-auto-completion

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.

Image for post

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”

Image for post

The search form HTML can be integrated to website now, retrieve the form source by clicking on “Form Source”

adobe-search-and-promote-auto-completion
<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>
Image for post

The values of sp_css_cache_ver and sp_js_cache_ver changed on every modification of auto complete setup.

The updated CSS and JavaScript values can be retrieved by enabling the presentation template, enable the required configuration in the presentation template based on the template type, I am using JSON template type in my case

custom_presentation_json.tmpl (Sample with minimal configuration)

<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>

Retrieve the details through 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"
}
]
}

If you are using custom search form with custom java script and CSS, the auto completion data can be retrieved through the below JSONP URL

https://content.atomz.com/autocomplete/spxx/xx/xx/xx/?callback=jQuery35109061281263500554_1594919810495&query=tit&max_results=7&beginning=1&ignore_apostrophes=1

beginning=0, matches the query data anywhere in the auto completion data

spxx/xx/xx/xx/ — Split the account number to this specific pattern

Stage URL — https://content.atomz.com/autocomplete/spxx/xx/xx/xx-stage/?callback=jQuery35109061281263500554_1594919810495&query=java&max_results=7&beginning=0&ignore_apostrophes=1

<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>
Image for post

The Auto-completion can be used in the search form to recommends the search terms based on the word user beginning to type.