Download - ATG Auto-Complete & Type-Ahead
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 1/14
ATG Page 0
ATG Auto-Complete &
Type-Ahead Pawan Modi
ATG is the worldwide leader in the E-commerce solutions. This document describes about ATG support
for auto-complete / type-ahead.
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 2/14
ATG
1 ATG Auto-Complete & Type-Ahead
1
PrefaceThis document is a quick handbook for ATG Auto-Complete feature. This document is based on my
hands-on ATG experience. Document details out the ATG components involved in implementing the
type-ahead feature. The target audience of this document is ATG application developers.
Autocomplete involves the program predicting a word or phrase that the user wants to type in without
the user actually typing it in completely. Today auto-complete is a very common feature supported by
most of the available search engines. Having auto-complete on e-commerce web-site enhanced the
customer experience. On e-commerce websites this feature is very useful for product search.
In this document, I have covered Type-Ahead design, sample code and configuration for the same. This
document is easy to understand and implementation guide for auto-complete feature. The sample code
examples are based on ATG9 libraries and ATG9-Search.
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 3/14
ATG
2 ATG Auto-Complete & Type-Ahead
2
Table of Contents
ABBREVIATION 3
ATG 4
Introduction 4
Auto-Complete / Type-Ahead 4
customer experience. 4
ATG Support Auto-Complete 4
Pre-Requisite 4
AUTO-COMPLETE ARCHITECTURE 5
Data XML Configuration 6
Creating Search Environment 7
Create New Search Project 7
Add Content 8
Post Index Customization Configuration 9
Create New Environment 10
Front-End UI Changes 11
Type-Ahead Page 11
Search Page Text Box 12
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 4/14
ATG
3 ATG Auto-Complete & Type-Ahead
3
Abbreviation
DAS Dynamo Application Server
DAF Dynamo Application Framework
DSS Dynamo Scenario Server
DPS Dynamo Personalization Server
DRP Dynamo Request Protocol Server
GSS Global Scenario Server
LM Load Manager
CM Connection Module
RMI Remote Method Invocation
DCC Dynamo Control Center
SBS Session Backup Server
UDP User Datagram Protocol alternative protocol to TCP/IP, (usually used for broadcasting)
SNMP Simple Network Management Protocol, MIB packet services
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 5/14
ATG
4 ATG Auto-Complete & Type-Ahead
4
ATG
IntroductionATG is the worldwide leader in the E-commerce solutions. ATG product suite has enabled the vendors
to enable their e-commerce commercial capabilities.
Auto-Complete / Type-Ahead
Autocomplete involves the program predicting a word or phrase that the user wants to type in without
the user actually typing it in completely. Autocomplete speeds up human-computer interactions & also
enhance the customer experience.
Every computer user is not a typing expert and searching for product / information on internet where
you have millions of websites and products is tedious. Typing long product names to get desired searchresults is time & effort consuming.
Auto-complete ease the user by suggesting the phrases based on first few characters typed by user.
ATG Support Auto-CompleteATG Search supports auto-complete feature like while entering the query text in search box user is
provided with a list of options to choose from. These options are displayed as a dropdown menu, which
contains the strings that matches the first few characters provided.
For example if the user entered “pro” then the list will display all the matching options like “product” ,
“program”, “promotion” etc. User may then select from the dropdown or may also complete the search
ignoring the dropdown.
Pre-RequisiteGoing ahead with the setup, assuming following dependencies are in place.
1. ATG9.1 installed and working.
2. ATG9 Search Setup is done and working.
3. Java script library script.aculo.us. Refer http://script.aculo.us
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 6/14
ATG
5 ATG Auto-Complete & Type-Ahead
5
Auto-Complete ArchitectureATG recommendation is to have dedicated server / instance to support auto-complete functionality. This
is important because every keystroke in search box sends Ajax request to server. Hence lots of request
coming in to the server based on the number of active user on your website.
Not providing the dedicated instance / server for auto-complete may impact the performance of your
production server due to many request flowing in for every key stroke.
We can have auto-complete data and catalog data indexed in the same index file or in separate index
files. Dedicated index files are recommended because having separate search engine for actual query
and auto-complete request is recommended. Hence performance of your query search engine will not
be impacted by auto-complete queries.
Also for this example, i have used AJAX.Autocompleter function from the script.aculo.us an open source
javascript library. Refer http://script.aculo.us for more information.
Note: - The WAR file for queryconsole application includes script.aculo.us javascript files. This war file
can be found under the following path.
<ATG9dir>/DAF/Search/Base/QueryConsole/web-apps/queryconsole.war
Note:-
1. I have used AJAX.Autocompleter function from the script.aculo.us an open source javascript
library. Refer http://script.aculo.us for more information.
2. If you are using Jquery javascript framework in your application then using scriptaculous may
cause a conflict, because the function “$” is defined in both the frameworks, and definition of
one will be overridden by other.
3. The script file for scriptaculous must be included in the head and not anywhere else.
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 7/14
ATG
6 ATG Auto-Complete & Type-Ahead
6
Data XML ConfigurationWe need to prepare data xml for Auto-Complete feature. All auto-complete data resides in xml file. This
data xml is input for search engine. Search engine index the data xml and send response back with the
matching strings for every character entered by user in search box.
Sample data xml is shown below. You can all relevant strings in this xml based on your catalog data. You
must have better understanding of all product / services available in your catalog before preparing this
xml.
This data xml should be placed at the following path.
<ATG9dir>/home/localconfig/atg/searchadmin/customizations/auxiliary_data
In above xml there are many elements and attributes. Let me brief it.
lang – is the supporting language by search engine. Default is English. If you want to have localization or
internationalization support then you needs to create that many xml file in relevant languages with
relevant data.
min – The minimum number of input characters required to fire auto-complete query. Example if this is
set to 3 then unless user types-in 3 characters, request will not go to server. From 3 characters and
above, request will be fired for every keystroke.
max – The maximum size of key. Requesting results with a longer key will simply truncate the key.
top – The maximum text results to store under each key.
Element t – This contain actual text data which is shown to user in front end.
Attribute v – is the priority or order in which strings are returned to user. Example if there are 5 options
matching the input characters then they will be shown in the order defined by the attribute v.
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 8/14
ATG
7 ATG Auto-Complete & Type-Ahead
7
Creating Search Environment We need to create a separate search environment for type-ahead (auto-complete) feature as mentioned
earlier. Unlike normal indexing where we index repository data but here indexing happens on the type-
ahead data xml file.
Create New Search Project
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 9/14
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 10/14
ATG
9 ATG Auto-Complete & Type-Ahead
9
Post Index Customization ConfigurationIn post-index customization, we have to add auxiliary data.
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 11/14
ATG
10 ATG Auto-Complete & Type-Ahead
10
Create New Environment
Save and start this environment and do full indexing.
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 12/14
ATG
11 ATG Auto-Complete & Type-Ahead
11
Front-End UI ChangesImplementing auto-complete feature involves coding of 2 JSP pages.
Type-Ahead PageThe type-ahead page is for sending the auto-complete queries to server and rendering the responses
(suggested strings). This JSP is rendered repeatedly as the user types text in the search box on the
search page.
The type-ahead page is rendered as a dropdown of strings matching the current value in the text box.
The frequency of rendering the page is controlled by the JavaScript autocompleter function, but typically
it polls for changes several times a second so the autocomplete dropdown is updated frequently as the
user types. Sample code for type-ahead page is shown below.
Above droplet, input and output parameters are explained following sections.
TypeAheadDroplet
This droplet takes as input several search query attributes, constructs a TypeAheadRequest based on
these inputs, and submits the query to ATG Search. The droplet then receives the results as a list of
autocomplete strings matching the query text and renders them on the page. For detail information on
this droplet kindly refer the Oracle API document here.
Following are some input parameters for this droplet.
context – The session-scoped component of class atg.search.formhandlers.SearchContext that maintains
information about the connection to ATG Search. Typically this is set to/atg/search/formhandlers/SearchContext.
text – The search query text to return autocomplete strings for.
environment – The name of the ATG Search environment (created through Search Administration)
whose index contains the type-ahead data.
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 13/14
ATG
12 ATG Auto-Complete & Type-Ahead
12
language – The language of the type-ahead data. This should match the query language. Setting this
attribute you are telling search engine to refer language specific data xml for appropriate result. Refer
Data XML section for more detail. This attribute is useful to have support for internationalization and
localization.
sort – The type of sorting to perform on the list of matching autocomplete strings. Options are as follow.
alpha -- Sort in alphabetical order.
length -- Sort by the length of the strings.
value (default) -- Sort by the rankings provided with the type-ahead data.
match -- Sort using the search engine’s metric that takes into account both the rankings
provided with the type-ahead data and the lengths of the matching strings (with shorter strings
ranked higher because the search substring represents a greater proportion of the matching
string).
sortOrder – The ordering to apply to the sorted results. Can be either “ascending” or “descending”(default).
Following is the open paramenter
itemFormat – This open parameter is rendered once for each matching autocomplete string.
Following is the output parameter
match – This parameter is set iteratively to each matching autocomplete string.
Search Page Text BoxThis page / text box is to submit search queries to QueryFormHandler. This page is use to construct the
search form and fire a query against the catalog data.
In order to support auto-complete, we need following addition in this jsp.
A <script> tag that import the JavaScript libraries.
A <div> tag that enables you to associate the type-ahead dropdown with the search text input
field.
JavaScript that calls the autocompleter function.
7/22/2019 ATG Auto-Complete & Type-Ahead
http://slidepdf.com/reader/full/atg-auto-complete-type-ahead 14/14
ATG
13 ATG Auto-Complete & Type-Ahead
13
In coming section we will see this in details.
1. Import JavaScript Library in search text box jsp.
2. Using a <div> element with search text input field. The div is placed just below the search box to
render the typeAhead.jsp with auto-completed strings.
3. Calling auto-complete function. The example below creates a JavaScript function i.e.buildQueryCallback, which constructs the URL (including query parameters) for rendering the type-
ahead page. It also creates a JavaScript function i.e. AutoComp. This function is executed when the
page loads and calls the Ajax.Autocompleter function with arguments that associate it with the text
field and <div> element in the search form shown above. Ajax.Autocompleter renders the type-
ahead page using the URL constructed by the buildQueryCallback function, adding a query
parameter q whose value is the string currently in the text box.
For example, if the user types “nok,” the URL constructed by the JavaScript is shown below.
typeAhead.jsp?q=nok&environment=commerce&language=English
The query parameters are used to set the input parameters of the TypeAheadDroplet on the type-ahead
page. For more information about the Ajax.Autocompleter function, including additional options that
can be specified in the function call, visit here.