Show Menu
TOPICS×

About Auto-Complete

You can configure various areas of Auto-Complete to control the generation of the auto-complete enabled search form, and the file autocomplete_data.js, which is included as a part of the auto-complete enabled search form.

About Auto-Complete

The file autocomplete_data.js is regenerated and published to the search content network each time there are changes that the Auto-Complete Setup page has saved.

Configuring Auto-Complete

You can configure and setup the options that control the generation of the auto-complete enabled search form, and the file.
After you configure auto-complete, you can view the resulting HTML source for review. The HTML source is what you copy and paste into the pages of your website.
To configure Auto-Complete
  1. On the product menu, click Design > Auto-Complete > Auto-Complete Setup .
  2. On the Auto-Complete Setup page, set the options that you want.
    Option
    Description
    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.
    Form name
    Specifies the "name" attribute of the auto-complete enabled search form's "form" tag. For example,
    <form name="SiteSearch" method="get" action="https://sp1004337c.guided.t1.atomz.com" target="_blank">
    where SiteSearch is the name attribute of the form tag.
    Div tag ID
    Specifies the ID attribute of the auto-complete enabled search form's "div" tag. For example,
    <div id="autocomplete">
    where autocomplete is the attribute of the div tag.
    Input tag ID
    Specifies the ID attribute of the auto-complete enabled search form's "input" tag. For example,
    <input type="text" id="q" name="q" />
    where q is the id attribute of the input tag.
    Display shadow
    Adds a cosmetic drop-shadow to the auto-complete suggestions list.
    Match only at beginning of phrase
    Only suggest results that match the beginning of the input text .
    Support UTF-8 character set
    Correctly handle non-ASCII characters in terms.
  3. Click Save Changes .
  4. (Optional) Do one of the following:

Configuring Auto-Complete Word List

Configure the list of words and phrases that Auto-Complete displays to a customer as suggestions.
To configure Auto-Complete Word List
  1. On the product menu, click Design > Auto-Complete > Auto-Complete Word List .
  2. On the Auto-Complete Word List page, set the options that you want.
    Option
    Description
    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.
    Click Edit to see the list or to add word and phrases to the list. When you are finished, click Save Changes .
    Remove these words and phrases
    Entries in this area are not displayed in the auto-complete word list.
    Click Edit to see the list or to add word and phrases to the list. When you are finished, click Save Changes .
    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.
    Important : You should only use regular expressions only if you have previously worked with them in other applications.
    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.
    If you want the Auto-Complete suggestions to appear "first letter capitalized" or "all caps", add the text-transform : capitalize; or text-transform : uppercase; CSS text properties to the Auto-Complete CSS content, under "/* styles for result item */".
    Update on Re-Index
    Auto-complete word list is automatically regenerated after each successful account re-index.
  3. Click Save Changes .
  4. (Optional) Do any of the following:
    • Click History to revert any changes that you have made.
    • Click Preview Word List to save any changes you have made, and then open Auto-Complete Word List Preview page where you can review the auto-complete suggestions list. Use the navigation options near the top of the page to review and refine the displayed list. When you are done, click Close to return to the Auto-Complete Word List page.
    • Click Live .
    • Click Push Live .

Configuring Auto-Complete CSS

Use Auto-Complete CSS to 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. For an example of the visual presentation ideas that are possible, see the following:
When you are finished configuring Auto-Complete CSS, you can preview the search form to see if the CSS that you specified is acceptable in appearance and layout.
Important : To apply your custom auto-complete CSS, you need to remove the comment tags from the second line that appears in the HTML code. Then you move the same line to within the head section of the page that contains the search form.
To configure Auto-Complete CSS
  1. On the product menu, click Design > Auto-Complete > Auto-Complete CSS .
  2. In the Auto-Complete CSS text field, paste or type the cascading style sheet information that you want to associate with the auto-complete suggestion list.
  3. Click Save Changes .
  4. (Optional) Do any of the following:

Previewing the search form as it would appear on your website

Based on your configuration of Auto-Complete and Auto-Complete CSS, you can preview how the search form appears if you were to add the HTML code to your website.
To preview the search form as it would appear on your website
  1. On the product menu, click Design > Auto-Complete > Search Form .
  2. (Optional) Click HTML code to see the HTML that you copy and paste into the pages of your website.

Copying the HTML code of the search form into the pages of your website

Based on your configuration of Auto-Complete and Auto-Complete CSS, you can preview how the search form appears if you were to add the HTML code to your website.
To copy the HTML code of the search form into the pages of your website
  1. On the product menu, click Design > Auto-Complete > Form Source .
    Do not change the form name= value in the form source.
  2. (Optional) Do any of the following:
    • If you configured auto-complete CSS and want the styles applied to the search form, remove the comment tags from the second line that appears in the HTML code. Next, move the same line to within the head section of the page that contains the search form.
    • For maximum performance, move the tags that are listed at the bottom of the HTML code and place them at the bottom of the body section of each page that contains the search form.
  3. Copy the code and paste it in the web pages of your website where you want the search form to appear.