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.

See Previewing the search form as it would appear on your….

See Configuring Auto-Complete Word List.

See Configuring Auto-Complete CSS.

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.

    See also Previewing the search form as it would appear on your….

    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.

See Configuring Auto-Complete.

See Configuring Auto-Complete CSS.

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.

    See Previewing the search form as it would appear on your….

    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.

    See Regular Expressions .

    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 "/*%20styles%20for%20result%20item%20*/?lang=en".

    See Configuring Auto-Complete CSS .

    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.

      See Using the History option.

    • Click Live.

      See Viewing live settings.

    • Click Push Live.

      See Pushing stage settings 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:

https://developer.yahoo.com/yui/examples/autocomplete/ac_skinning.html.

Configuring Auto-Complete Word List.

Configuring Auto-Complete.

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.

See Previewing the search form as it would appear on your….

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.

See Copying the HTML code of the search form into the….

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.

See Configuring Auto-Complete.

See Configuring Auto-Complete CSS.

See Copying the HTML code of the search form into the….

See Using collections in search forms.

See Using frames with forms.

See Sample advanced search form.

See Advanced search form HTML code.

See Advanced search form template code.

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.

See Configuring Auto-Complete.

See Configuring Auto-Complete CSS.

See Copying the HTML code of the search form into the….

See Using collections in search forms.

See Using frames with forms.

See Sample advanced search form.

See Advanced search form HTML code.

See Advanced search form template code.

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.

    NOTE

    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.

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free