Ajax AutoComplete Manual
A detailed information about the Ajax AutoComplete extension
How many times have you struggled with entering long lists, while you had to lookup a product or country? AJAX AutoComplete will make your life easier. Your user can get a filtered dropdown with choices after entering a few characters, enabling quick search and selection without having to enter long text.
Advanced: Creating a Form with AutoComplete Fields
Introduction
In this chapter we'll show you how to create a form with Autocomplete fields. We've created an empty HTML page with a background image. We are going to insert three fields, one manually, one from a database and one from predefined templates. The final form will look like this;
Building the Form
- Create a new HTML page
Choose File-> New in your Dreamweaver menu and select We've inserted a background for the looks, but this is not mandatory.HTML to create your page. - Install the Free Submit Form extension from DMXzone.com (optional)
The easiest way to create a submit button for your form is to install this extension which can be downloaded for free at DMXzone.com. Restart Dreamweaver after you've installed the extension.
- Create a form field
The first thing we need to do is to create a form field that tells that the data in our AutoComplete fields must be posted. Select Insert in your Dreamweaver menu and choose the Form option and choose Form again.
We'll also specify the page that we need to go to after the form is posted. Enter thankyoupage.asp in the Action field of the property inspector.
- Insert a table on the page - Select Insert->Table from your Dreamweaver menu and create a Table with two columns, four rows and no borders.
Insert the text Product, Username and Country in the left columns of the table so your form looks like this;
- Inserting the text and the submit button - Enter the names of our fields in the first three columns and insert the submit button.
- Adding The Submit Functionality To
Your Button - Go to your Tag inspector
and choose FlevOOware->Submit Form.
A popup appears, select your form (in this case this is the default form) and type thankyoupage.asp in the Form Action field (we'll create this page later on) and press Ok.
Inserting the AutoComplete Fields
- Inserting a manual AutoCompletion
field - Place the cursor into the column next
to the Product and press the
icon from the DMXzone
object bar to insert the AutoComplete field.
Set the Autocomplete data provider to Generate autocomplete manually.
Press the Add word button to add the search suggestions. We'll enter the
following Words and Texts;
AJAX AutoComplete |
It's All About Usability |
CSS Image Gallery |
Create Pure CSS Galleries |
Flash MP3 Player |
Include A Music Player On Your Site |
Flash Image Enhancer |
Enhance Your Images Real Time |
Fish Eye Menu |
Create Fantastic Fluid Menus |
Press Ok to include the field.
- Inserting a database AutoCompletion
field - Place the cursor into the column next
to the Username and press the icon from the DMXzone
object bar to insert the AutoComplete field.
Set the Autocomplete data provider to Generate autocomplete from database.
We'll use a database connection from our user database.
If you don't have a database you can create a user list manually. Press OK to insert the field.
- Inserting an Automcomplete field from
predefined templates - Place the cursor into the
column next to the Country and press the icon from the
DMXzone object bar to insert the AutoComplete field.
Set the Autocomplete data provider to Generate autocomplete from predefined templates.
Select the Countries template in the Provider properties field.
Press OK to insert the field.
- Enter the field names - Select the Ajax Autocomplete fields in your design view and enter the Field name for each field. We name the first field, product, the second username and we call the last field country. We use these names to display the values the user typed in the "Thank you" page that we'll create later on.
Building the "Thank You" page
Create a new ASP page - Choose File-> New in your Dreamweaver menu and select ASP VBScript to create your page. We've inserted a background for the looks, but this is not mandatory. We also created a title and typed in the text that needs to be displayed before the form results, your page should look like this;
- Insert the From Request Fields - We set the cursor to the place where we want to insert the form results and create a binding. Press the + icon in the Application/Bindings tab of your Dreamweaver interface and select Request Variable (select "Form variable", if you use PHP, other properties and screens might differ too).
- Select Request.Form in the Type dropdown fieldand enter the Name of the form field you want to display the results of. In this case we enter "product" as this is the first form field we want to retrieve.
- Do the same for the other fields (username, and country). You should have the following bindings;
- Now drag the fields into the correct place on your "Thank you" page to display the values the user entered in the form. We select the fields in our design view and make them bold (this is optional), you should see the following in your design view:
That's it, you've created your own form that allows users to enter values that are displayed on your "Thank you" page. Save your page, open the form and test in your browser to see how it works.
Lubov Cholakova
Lubov has been with DMXzone for 8 years now, contributing to the Content and Sales departments. She is bringing high quality content in the form of daily blog updates, reviews, tutorials, news, newsletters,update emails and extensions' manuals. If you have a product that needs publicity or any other questions about the entire DMXzone community, she is the one you can contact.