Ajax AutoComplete Manual

The Basics: Creating a Basic AJAX AutoComplete Field

How to do it:

In this tutorial we're going to show you how easy it is to insert an AJAX AutoComplete field on to your page. We'll generate the search suggestions (the fields below the entry field), using manual input, a database and finally we'll use one of the supplied AutoComplete templates.

Generating an AutoComplete Field manually

1. Create a new HTML page
   Create a new or open an existing HTML page and save the page.
   
   
2. Applying the extension
   Choose the  icon from the DMXzone object bar to apply the extension, the following  popup appears:

3. Setting the Main Options
   The Delay determines how long it takes before your search suggestions are displayed, the higher the value the longer the delay, we'll set this value to 75ms.

When the Autoselect first suggestion option is set to true the extension will complete the word after the first character(s) are entered, we'll set it to true.

Autocompletion sensitivity determines how any characters must be entered before the suggestions are displayed; we'll set it to 1

Show autocomplete using sets the incoming transition of the Completion box while Hide autocomplete using sets the outgoing transition, we set them both to fade.

5. Choosing the Autocomplete data provider - We'll select Generate autocomplete manually so we can make our own search suggestions, we'll explore the other options later on.

6. Configuring the Suggestions options - You can either choose Begin with or Contain user input. Begin with requires the word to start with the entered characters while Contain makes sure the entered characters are matched in the entire word, they don't have to start with the character. We select the Begin with option.

The Maximum suggestions determines the maximum number of results, we'll set it to five.

The latest dropdown lets you choose whether to search for the primary (From primary) or From all fields. We set it to From primary fields.

7. Setting the Provider properties
   Press the Add word button to add your search suggestions, we've added three items;

Double click on the <name> or <value> field to edit the search term and the descriptive text.

8. You can remove items by pressing the Remove selected button.

9. Final Steps

Press OK to generate your AJAX AutoComplete field.

Be sure to copy the images folder and the styles folder to your server.

Press OK and press f12 to preview and save.  That's it you've created your own AutoComplete field!