APEX autocomplete – populate multiple fields

Thursday, June 5, 2014

APEX autocomplete – populate multiple fields

Most recently, I was working on a project in which there was the requirement to populate multiple fields when selecting a value from an autocomplete list. This would make it possible for the end user to fill in an entire form with a single click of a button. Accomplishing this would highly enhance the user experience and reduce the repetitive steps of filling in a form.

To realize this, I used the Text Field with autocomplete component which comes with Application Express 4 and up. I like to keep things easy, so using a build-in component is more obvious than creating a custom autocomplete functionality. By using this component, I am also sure that this solution will be supported in upcoming versions of Apex … or at least it should.

For this demo, I will base myself upon a tble containing fictive address information. I will start off with a simple form using several columns of this table.

 

The intention is to fill in the form when a customer is selected from the autocomplete list (Customer text field on this region). Let’s create the autocomplete list first:

 

 

Make sure Lazy Loading is turned on, so matching values will be read from the database each time the user types a character. In case of a query returning a lot of rows, this will make your page render a lot faster:

 

 

The List of Values looks as follows:

 

 

Under Security, set Escape special characters to No:

 

 

Click Apply Changes, the autocomplete item is now properly configured. As next, add an inline CSS-rule at the page definition which hides everything within the ac_data-tag:

 

 

If you run the page, the autocomplete field should be working as intended. The tags should not be escaped and data within the ac_data-tag is hidden as well:

 

 

As you can see, all the address information of a customer is shown in the dropdown box.

Next, create a dynamic action to populate the right fields when the user selects a value from the list:

 

 

Give the dynamic action a name:

 

As event, select Page Load:

 

 

As action, select Execute JavaScript Code with the following lines of code:

 

 

This piece of code will make sure that when a user clicks on a result from the list, an array of all the data between the ac_data -tags is created based on the |-symbol. Once the array is created, its values are assigned to the corresponding fields of the form.

Click Create Dynamic Action to complete the wizard.

The setup is now complete, run the page and check if selecting a value from the list has the desired result:

 

 

 

I would really appreciate your feedback and any comments on this.

 

VT/JUVO