ApEx AJAX Text Filter

A while ago, a customer asked me to develop a report page with an option to search on a title. For every character the user typed, the results should immediately be adjusted. I did some research and came out on an AJAX text filter.

I couldn’t find a step by step tutorial about this so I made my own.

1. Things to do before we start

Create an Apex application
Create a new page
Create a report region

2. Making the text filter

2.1. Create the necessary fields
Create a text field on your ApEx Page and name it P1_TEST1 and place it above your report.. This field will serve as our search field.

Create an application item F138_SEARCH_NAME. This item will hold our search string.

2.2. Add the JavaScript function to your page

The javascript code can be found here.

The ‘searchTitle‘ string indicates which application process must be called to search for any possible results.

Edit your text field P1_TEST1 and put the next code under HTML Form Element Attributes: ‘ onkeyup=”f_TestOnDemand()” ‘

2.3. Create an empty html region

Create an HTML region, give it the title ‘Result Region‘ and place it under your search field. The region source is a ‘div’ tag with “test2” as id.

JavaScript will replace the content of the div with the matching results.

2.4. Create the application process

Create an “On Demand” application process “searchTitle” in the Shared Components. Later on, Javascript will refer to this process.

The code for the process can be found here.

You will see that in the query, the search item refers to the application item.

3. Result

I made a working example available here.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

About Olivier Dupont