Ajax example: Autocomplete and Autofill (Automated Data Retrieval)
This example demonstrates how to create a text field with the Ajax
autocomplete feature that automatically suggests results from the database while
typing, and how to populate forms with data related to entered value.
In this example as soon as a user starts typing text in the Name field, a list
of matching employee names is shown. After an employee is selected, the employee
information is automatically retrieved from the database and used to populate
Type a character into the Name field, for example "a". Matching
names will be displayed automatically.
Select a name from the list. Employee information will be retrieved and
shown automatically in the remaining form fields.
Steps to recreate
Use Record Builder to create a Record form with the
desired textbox and listbox controls based on the 'employees' table fields.
Use Toolbox->Forms->Hidden to add a Hidden control at the bottom of
Run the Feature Builder to add Autocomplete
feature to the emp_name textbox.
Open emp_name textbox Features (Property
Window->Data tab) and add a Condition called Condition2
with the following settings:
This condition will be used to check that the emp_name textbox
is not empty.
Run the Feature Builder once again to add the Autofill
feature. Use emp_name field as the target control and add the
following fields in the Filled controls list: emp_id,
emp_login, emp_password, emp_name, title, group_id, department_id, email,
picture, phone_home, phone_work, phone_cell, fax, city, zip, address.
Use OnTrue event of the above Condition2 as the
starting point for the Autofill feature: Start event:employeesemp_nameCondition2.ontrue;
Switch to the HTML mode and add id="employeespicture1"
attribute to the <tr> tag of the row where the image is located. The
resulting html will look as follows:
Under emp_name textbox features add the Hide-Show
feature to be used to hide or show employee’s picture. The picture will
initially be hidden and will display only when the Autofill action is
Use Toolbox >Html >Button option to add an Update
button to the record form. Switch to HTML mode and check
the button’s code:
If needed to make the Autocomplete list display employee pictures, the
service page's html output should be changed to look as follows:
<!-- BEGIN Grid employees1 --><ul><!-- BEGIN Row --><li style="height:50px;padding:0px;">
<img style="right:0px;position:absolute;" src="" height="50"></li><!-- END Row --></ul><!-- END Grid employees1 -->
The picture field should also be included in the employees1