Listenfeld typeahead: Intuitive Listensuche

von Gastautor Chris Belanger, einem 4D Entwickler aus Kanada

Listbox Typeahead (eine Methode zur progressiven Suche) ist keine native Funktion von Listboxen. Sie können diese Funktion jedoch mit etwas kreativem Coding leicht implementieren. In diesem Blog-Beitrag demonstriere ich die Technik zusammen mit einem Datenbankbeispiel und einem ausführlichen Dokument, in dem die Details Schritt für Schritt erklärt werden.

Das Endergebnis ist im folgenden GIF zusammengefasst, das zwei „Suchen“ veranschaulicht. Eine für E-L-L-I-O-T, dann eine weitere (nach einer Spaltensortierung) für H-A-N-N-A-H:

HDI: Listbox typeahead

Was wollen wir tun?

Wenn das Listenfeld den Fokus hat (aber nicht im „Eingabemodus“ ist), wollen wir einige Zeichen eingeben und das Listenfeld blättern lassen, um die nächstgelegene Übereinstimmung gemäß der „Sortierspalte“ auszuwählen. Wenn es beispielsweise nach Firmennamen sortiert ist, möchten wir den Namen einer Firma eingeben und ihn in der Listbox finden und hervorheben können. Wenn jedoch ein Listenfeld das fokussierte Objekt ist, kann es nicht auf Tastatureingaben reagieren.

Wie können wir also dieses Problem lösen, da es keine Möglichkeit zu geben scheint, die Tastatureingaben zu erfassen?

Platzieren Sie das Listenfeld in einem Unterformular

Der erste Schritt besteht darin, das Listenfeld in einem Unterformular zu platzieren (in der Beispieldatenbank heißt dieses Formular LB). Ok … aber wie sammeln wir die Tastenanschläge? Mit Hilfe von unsichtbaren Schaltflächen, denen „Tastenkombinationen“ zugewiesen sind.

Alle Tastenkombinationen rufen wiederum eine Methode auf, um den Suchtext zu ermitteln, ihn im Listenfeld zu lokalisieren und ihn für den Benutzer hervorzuheben. Sie können diese Erklärung nachvollziehen, wenn Sie das LB-Formular in der Datenbank Listbox Clairvoyance öffnen.

Die Listbox hat den Objektnamen LB_Browser. Seine Eigenschaften umfassen:

Die Entitätsauswahl heißt Form.es (im Kontext des LB-Unterformulars).

Am unteren Rand des LB-Formulars befindet sich eine Sammlung von Schaltflächen. Jeder ist ein Tastenkürzel zugewiesen. Die untere Reihe mag unübersichtlich erscheinen, aber sie dient den Tasten SPACE, – und _. Sie können bei Bedarf weitere hinzufügen.

Die Eigenschaften jeder dieser Tasten werden am Beispiel der Taste „A“ erläutert.

Der Objektname endet mit dem BRIEF, der ZIFFER oder dem SYMBOL, das er erzeugt. SPACE bildet eine Ausnahme; es verwendet das Symbol ␣ und wird in SPACE „übersetzt“.

Der Titel dient nur zur Verdeutlichung, die horizontale Größenanpassung ist Verschieben, und das Tastaturkürzel ist der Tastendruck. Das einzige Ereignis, das überprüft werden sollte, ist On Clicked.

Wenn ein Benutzer eine Tastenkombination drückt, wird das Skript für diese Schaltfläche mit einem On Clicked Form event code.

Das Skript für jede Schaltfläche lautet:

LB_SEARCH_DO (Form; OBJECT Get name)

Interpretation des Tastendrucks

Die LB_SEARCH_DO Projektmethode verarbeitet die Tastenanschläge. Sie verwendet das letzte Zeichen des Objektnamens, um die zu verarbeitende Tastenkombination zu erkennen.

$char:=$2[[Length($2)]] // get the last character in the object’s name.

Dieses Zeichen wird entweder an den Suchstring angehängt oder ersetzt den Suchstring, je nachdem, wie viel Zeit seit dem letzten Tastendruck vergangen ist. In der Beispieldatenbank wird bei jedem „wait“, das länger als 1,5 Sekunden dauert, eine neue Suche gestartet.

$now:=Milliseconds
If (($now-$obj_Search.lastMillisecond)>1500) //allow up to 1.50 seconds between keystrokes.
$obj_Search. searchFor :=$char //reset .searchFor
Else
$obj_Search.searchFor :=$obj_Search.searchFor +$char //add to .searchFor
End if
$obj_Search .lastMillisecond:=$now
Die Suche in der „Suchspalte“ wird durchgeführt, indem festgestellt wird, welcher Datensatz in der Entitätsauswahl die erste Übereinstimmung wäre, und dann dieser Datensatz in der Entitätsauswahl gesucht wird („.es„).

C_OBJECT($es_GreaterEqual) // the entity selection of the >= group that match the searchFor string.
$es_GreaterEqual :=$1.es.query($attrName+" >= :1";$obj_Search.searchFor).orderBy($attrName+" ASC")


Die $itemPosition innerhalb der Entitätsauswahl wird mit bestimmt:

If ($es_GreaterEqual.length>0) // if there was at least one match
$match :=$es_GreaterEqual[0] // $match = the FIRST RECORD in the collection
$itemPosition :=$es_GreaterEqual[0].indexOf($1.es)+1 // location of the matching entity within the selection
Else
$itemPosition :=$1.es.length
End if

Aktualisieren Sie nun die Zeilenauswahl der Listbox und blättern Sie, damit der Benutzer das Ergebnis sehen kann. Wir zeigen es in Zeile 5 in der Listbox an, um einen Kontext zu schaffen.

C_LONGINT($show) // used to cause the ITEM POSITION to show in the 5th line (or higher, if it is < 5).
LISTBOX SELECT ROW (*;$lbName;$itemPosition;lk replace selection)
$show :=Choose($itemPosition<4;1;$itemPosition-4) // it will be line 5, or closer to the top
OBJECT SET SCROLL POSITION (*;$lbName;$show;*)

Zum Schluss laden wir für die Demo die ausgewählte Entität in ein Objekt, auf das das übergeordnete Formular zugreifen kann.

Form.en_edit:=Form.es[$itemPosition-1] // for the parent form’s use

Und mehr

Laden Sie die obige HDI herunter, um einen genaueren Einblick in das Konzept zu erhalten. Zusätzlich ist ein ausführliches Dokument enthalten, in dem die Konfiguration des übergeordneten Formulars für den Betrieb der Listbox erläutert wird, sowie Tipps zur Gestaltung der Benutzeroberfläche und zur Verbesserung der Benutzerfreundlichkeit.

Ich hoffe, dies hilft Ihnen bei Ihrem nächsten 4D Projekt!