Ajax example: Autocomplete and Autofill (Automated Data Retrieval)

Description

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 form fields.

Usage

1. Type a character into the Name field, for example "a". Matching names will be displayed automatically.
2. Select a name from the list. Employee information will be retrieved and shown automatically in the remaining form fields.

Steps to recreate

1. 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 the form.
2. Run the Feature Builder to add Autocomplete feature to the emp_name textbox.
3. Open emp_name textbox Features (Property Window->Data tab) and add a Condition called Condition2 with the following settings:
   • Condition: does not equal (<>)
   • Name: employeesemp_name
   • Source Type: Control
   • Name: ""
   • Source Type: Expression
   • Start event: employeesemp_name.OnFocus;employeesemp_name.OnKeyUp;

   This condition will be used to check that the emp_name textbox is not empty.

4. 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.
5. Use OnTrue event of the above Condition2 as the starting point for the Autofill feature: Start event: employeesemp_nameCondition2.ontrue;
6. 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:

   <tr class="Controls" id="employeespicture1">
               <th>Picture</th>
               <td><img id="employeespicture" alt="" src=""></td>
             </tr>

7. 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 successful:
   • Enabled: Yes
   • Name: HideShow1
   • ControlId: employeespicture1
   • Show event: employeesemp_namePTAutoFill1.onsuccess;
   • Hide event: employees.onload;
8. Use Toolbox >Html >Button option to add an Update button to the record form. Switch to HTML mode and check the button’s code:

   <input class="Button" id="Update" type="button" value="Update" name="Update">

9. Add the id attribute to the <tr> tag of the row where the Update button is located. The row's html will look like:

   <tr class="Bottom" id="updatep"> … </tr>

10. Add the following html code near the Update button code:

    <span id="updateindicator" style="DISPLAY: none">Updating. Please wait...</span>

    The resulting row code should be:

    <td align="right" colspan="2"><span id="updateindicator" style="DISPLAY: none">Updating. Please wait...</span>
    <label for="Update" style="display: none;">Update</label>
    <input id="employeesemp_id" type="hidden" value="" name=""><input class="Button" id="Update" type="button" value="Update" name="Update">
    </td>

11. Add the UpdateDB feature to update the current database record based on the emp_id control value. Use Update Button’s onClick event as the starting point for the feature: Start event: Update.OnClick;
12. Add another Hide-Show feature to the emp_name textbox to control visibility of the span control added on Step 10 above. The span content should only be displayed while the UpdateDB feature is working:
    • Enabled: Yes
    • Name: HideShow3
    • ControlId: updateindicator
    • Show event: employeesemp_nameUpdateDB1.onstart;
    • Hide event: employeesemp_nameUpdateDB1.onfailure;employeesemp_nameUpdateDB1.onsuccess;
13. Also add the Condition feature to check that the emp_id control is not empty. This feature should be run every time when any control's value is changed.
    • Condition: does not equal (<>)
    • Name: employeesemp_id
    • Source Type: Control
    • Name: ""
    • Source Type: Expression
    • Start event: employees.onload;employeesemp_name.onchange;employeestitle.onchange;employeesdepartment_id.onchange;employeesemail.onchange; employeesphone_home.onchange;employeesphone_work.onchange;employeesphone_cell.onchange;employeesfax.onchange;employeescity.onchange; employeeszip.onchange;employeesaddress.onchange;
14. When the above condition is true, the Update button should be displayed on the form, therefore add another Hide-Show feature to hide and show the button area:
    • Enabled: Yes
    • Name: HideShow4
    • ControlId: updatep
    • Show event: employeesemp_nameCondition3.ontrue;
    • Hide event: employees.onload;employeesemp_nameUpdateDB1.onsuccess;employeesemp_nameUpdateDB1.onfailure;employeesemp_namePTAutoFill1.onfailure;employeesemp_namePTAutoFill1.onsuccess;
15. 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 grid’s DataSource.

Database Tables used

Database: Intranet

Tables: employees, departments