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.