APEX-AT-WORK no image

Ein paar nützliche Informationen zum APEX Autocomplete Item

Von Tobias Arnhold 12.15.2010
1. Das Item basiert auf dem JQuery Plugin: Autocomplete. Wenn Sie nähere Informationen zur Funktionsweise suchen, dann schauen Sie auf dieser Seite nach.

2. Tyler Muth erstellte unter APEX 3 eine Erweiterung für APEX: jquery-autocomplete-for-apex

3. Seit APEX 4 ist es ein Standard Item Type

4. Innerhalb des APEX Items können Sie spezielle Einstellungen für diesen Item Type vornehmen. Die wichtigste Einstellung ist die "Search"-Einstellung, Sie beinhaltet "Exact" oder "Contains" zur Auswahl.
Der entscheidende Unterschied ist die Art der Suche!
Bei dem Exact Verfahren wird ein Select ähnlich diesem während der Laufzeit aufgebaut:

-- Exact
SELECT a.*
FROM (SELECT DISTINCT CITY AS RV
FROM address_data ad
WHERE ad.country = :P1_COUNTRY
ORDER BY 1) a
WHERE "RV" LIKE :p$_search_string || '%' AND ROWNUM <= :p$_max_rows;

Wobei bei dem Contains Verfahren die INSTR Funktion verwendet wird:

SELECT a.*
FROM ( SELECT DISTINCT CITY AS RV
FROM address_data ad
WHERE country_id = :P1_COUNTRY
ORDER BY 1) a
WHERE INSTR ("RV", :p$_search_string) > 0 AND ROWNUM <= :p$_max_rows;

Bei der Verwendung von Indizes kann diese Info von entscheidenden Vorteil sein.
Ich habe zu diesem Thema vor kurzem auch eine Forum Anfrage gestartet: Problem with Textfield autocomplete --> only uses the INSTR function

5. Speichern Sie Werte nach jeder Eingabe durch eine Dynamic Action in der APEX Session *:
Event: Lose Focus
Selection Type: Item(s)
Item(s): P1_CITY
TRUE Action: Execute PL/SQL Code
PL/SQL Code: null;
Page Items To Submit: P1_CITY

6. Löschen Sie den Cache der Autocomplete Ergebnisliste durch eine Dynamic Action *:
Event: Lose Focus
Selection Type: Item(s)
Item(s): P1_CITY
TRUE Action: Execute Javascript Code
Code: $('#P1_STREET').flushCache(); $('#P1_ZIP').flushCache();

7. Sie können durch ein wenig Aufwand auch direkt durch TAB in das nächstes Input Item springen (Achtung: Item zurück SHIFT-TAB ist in der Lösung nicht möglich!)
Event: Key Release
Selection Type: Item(s)
Item(s): P1_CITY
TRUE Action: Execute Javascript Code
Code:

var vEvent = this.browserEvent.keyCode;
var vEl = this.triggeringElement;
var vName = this.triggeringElement.id;
var vButton = "9"; /* TAB Key */

/* Check ob Event TAB Press ist */
if (vEvent == vButton){

if (vName == 'P1_CITY'){
/* Flush Cache aller anderen Autocomplete Items */
$('#P1_ZIP').flushCache(); $('#P1_STREET').flushCache();
/* Sprung in naechstes Item - manuelle Vorgabe */
setTimeout(function() {$('#P1_STREET').focus();}, 1);
}

if (vName == 'P1_STREET'){
$('#P1_ZIP').flushCache(); $('#P1_CITY').flushCache();
setTimeout(function() {$('#P1_STREET_NO').focus();}, 1);
}
}


8. Aktuell fehlt noch das Lade-Icon das während der Suche im Item angezeigt wird. Dieses Problem wird in APEX 4.1 behoben sein. Workaround: APEX Page item Text Field with autocomplete doesn't show load icon

* Wichtig bei der Verwendung mehrerer Autocomplete Items auf einer Seite, da sonst der Such-Wert fehlen könnte!

2 Comments " Ein paar nützliche Informationen zum APEX Autocomplete Item "

Patrick Wolf 16 December, 2010 13:59

Hi Tobias,

was ist eigentlich der Grund dafuer P1_CITY (Punkt 5) immer im Session State zu speichern? Und warum wird in Punkt 6 der Cache geflushed?

Gruesse
Patrick

Tobias Arnhold 16 December, 2010 19:10

Ja im Grunde sind diese Features nicht von Relevanz, solange nur ein Autocomplete Item verwendet wird. Im Falle du verwendest mehrere auf einer Seite (Bsp.: Land, Bundesland, PLZ, Stadt, Straße) und bedingst diese Element innerhalb der Select-List, dann kann es gut möglich sein den Cache zu löschen, da während der Laufzeit sich der Rückgabewert ändert (Bsp: Aus Dortmund wird Düsseldorf durch Änderung der PLZ und erneuter Suche nach Orten in diesem Bereich). Schwierig zu erklären aber das beeinflusst stark die Usability.

Danke nochmal für den Tipp=Exact wieder verwendet werden.

Grüße

Tobias