Auto Complete

SELECT A COUNTRY

On many occasions we ask our users to submit forms which require selection of a state, country, car brand, etc. Quite often the user is then forced to go through a long list of options to get to the correct one. To help developers create forms that are more convenient to users, we offer this new tool, Autocomplete.

Autocomplete is an extension for Adobe Dreamweaver (Dreamweaver MX or later versions) that in a simple way allows you to convert a Combo Box (Menu / List) in an autocomplete field.

In a Menu / List converted into an Autocomplete, when the user presses a key, only the options that contain this same letter will be displayed, and as more letters are added to the selection, options shown are reduced accordingly. This way users no longer need to select the desired option scrolling down a long list, such as the list of states of a country.

The data to be shown with Autocomplete can be stored in the <option>  tags of the combo box itself (Menu / List) or be drawn from a database.

Note: If data are to be stored in a database, PHP Script support as well as MySQL database management are required on your Web server.

Requirements

• Adobe Dreamweaver (Dreamweaver MX, MX 2004, DW 8, CS3, CS4, CS5, CS6, CC,...).
• If data displayed in the Autocomplete are stored in a database: PHP script support on Web server; support for MySQL databases.

Please, check this Autocomplete (Animated Flash/Video)

Additional Info: Auto Complete - Online FAQ.

To install Autocomplete you must run "Install" in the application "Adobe Extension Manager" (Application used to install extensions to Adobe products) and enter the path to the downloaded file TE_Autocomplete.mxp.

Once the extension is installed, it can be inserted into the web page through the menu in Adobe Dreamweaver: "Insert> Autocomplete" or through "Insertbar> Common> Autocomplete".

To use the Autocomplete extension, it is necessary to follow these steps:

1. Run Adobe Dreamweaver and open in edit mode the web page where Autocomplete will be inserted.
2. Select Menu / List that you wish to convert to Autocomplete.
3. Press the Autocomplete option on the menu in Adobe Dreamweaver. Autocomplete option can be accessed from the menu option "Insert> Autocomplete" or by "Insertbar> Common> Autocomplete".

Note: The Menu / List to be converted into an Autocomplete field, must not have the multiline attribute, nor the size attribute defined.

Autocomplete Setup Window

Once clicked on the Autocomplete option, a configuration window (Figure 1) will be displayed, which will allow you to easily define the source of data to display.

Select Data Source: Select what will be the source of the data to use Autocomplete.

Two possible options are:

• Flat options in select: the completion is done using the <option> tags defined in Menu / List to which the Autocomplete extension is applied.
• From Database: Autocomplete will take data from a database. Opting for this version will enable the remaining fields, which are only required to interact with the database and generate lists.

Hostname: Required field. Host name or IP address where the database is located.

Database: Required field. Name of the database containing the information.

Username: Required field. Username to connect to the database.

Password: Password to connect to the database. A database may not be protected by a password, although this is highly recommended for security reasons.

There is another group of fields in the setup screen that are required for polling the database, while generating search results. The items displayed via Autocomplete are selected from the database using as criterion the sequence of characters entered by users via the browser.

Table name: Required field. Name of the table within the database that stores information to be displayed using Autocomplete.

Column name for autocomplete texts: Required field. Name of the column that stores the text to be shown by Autocomplete.

Column name for autocomplete values: Required field. Name of the column that stores the values associated with each element to be shown by Autocomplete.

For more clarity let’s imagine the following scenario:

Suppose that your database has a table named "users". The structure of the table "users" is very simple:

userid, username

Besides you wish to insert an Autocomplete field associated to a list that has user names as well as user ID’s. For this, we complete the above fields as follows:

Table name: users
Column name for autocomplete texts: username
Column name for autocomplete values: userid

Once Autocomplete has been inserted in a website, it is necessary to update the modified web page on the server and publish the directory named "TEScript" which contains the code necessary for the correct functioning of the Autocomplete extension.