Saturday 1 August 2020

New Plug-in: Reacting on changed content of APEX Autocomplete Item

Why use Text Field with autocomplete

Right now I am developing a series of mobile applications for personal use. And of course I learn a lot about developing with Oracle APEX for mobile.
I like to use auto complete items in mobile apps because to my opinion select lists are less suited for mobile use most of the time. One of the reasons is that in long lists, in contrast to in desktop applications, you cannot filter on the first character. Because you do not have a keyboard! So you have to scroll a lot. On iPhone this takes place on the bottom of the screen where you see only about three items at a time. I once checked in for a flight using the mobile app from the airline. I had to select my country (The Netherlands) from a select list of some 200 countries four times. And each time it took me about 30 secs to scroll through the 170 countries until I reached The Netherlands.
With an autocomplete item it would take 2 secs to type in a discriminating 3 or 4 characters to get to the result.
So that is why I prefer to use Autocomplete items. But I found out there is a problem with reacting on when the content of such an item changes. A Dynamic Action of type Change does not fire when the value of an Autocomplete item is selected.

Reacting on change of Text Field with autocomplete

A quest for an answer on the internet revealed, that a special event type should be used. Under the heading Component Events we can find: Update [Text Field with autocomplete].

When using this event to define a Dynamic Action, the DA fires the moment a value from the suggestion list of the autocomplete item is chosen. So contrary to the Change event the focus is still on the Autocomplete item. Furthermore there is no reaction on values entered that are not in the suggestion list.

So I started off to find a way to detect changes in the Text Field with autocomplete.
I defined a On Focus DA in which the current value is stored into an attribute old-value of the input item. In a Lose Focus DA this value is retrieved and compared to the current value of the item. If there is a difference, action can be taken. Then I selected a value form the auto complete suggestion list. This took the focus away from the Autocomplete item, and the change event was triggered.
So the Lose Focus DA does not work.
With some googling I found out that only input, select, textarea, anchor and button elements can receive focus. So I could try to implement the code in Lose Focus in the Get focus actions for the other elements. And this works!

But it is quite cumbersome to define these actions for each Autocomplete item and all the other elements we want to monitor. Besides the task would be difficult for developers who are not so familiar with JavaScript. So I decided to create a plug-in for it.

Autocomplete change detection DA Plug-in

So I have developed a plug-in for watching changes in Autocomplete items and triggering an event when a change is detected.
You can find the plug-in on apex.world
You can apply this plug-in on Page Load. The plug-in automatically watches all Text Fields with autocomplete on the page.

When the value of an Autocomplete item is changed, an event is fired from that autocomplete item. You can find the event in the event in the Component Event chapter of the Event list, as you can see in the DA definition below:




Happy APEXing.





No comments: