Typeahead de la boîte de liste : Recherche intuitive dans les listes

par l’auteur invité Chris Belanger, un développeur 4D du Canada

Le typeahead (une méthode de recherche progressive) n’est pas une fonctionnalité native des boîtes de liste. Cependant, vous pouvez facilement implémenter cette fonctionnalité avec un codage créatif. Dans cet article de blog, je vais démontrer la technique avec un exemple de base de données et un document exhaustif expliquant les détails étape par étape.

Le résultat final est résumé dans le GIF ci-dessous, il illustre deux « recherches ». Une pour E-L-L-I-O-T, puis une autre (après un tri de colonnes) pour H-A-N-N-A-H :

HDI : Listbox typeahead

Que voulons-nous faire ?

Lorsque la zone de liste a le focus (mais pas en « mode de saisie »), nous voulons pouvoir taper quelques caractères et faire en sorte que la zone de liste défile et sélectionne la correspondance la plus proche en fonction de la « colonne de tri ». Par exemple, s’il est trié par nom de société, nous voulons commencer à taper le nom d’une société et le voir localisé et mis en évidence dans la zone de liste. Cependant, lorsqu’une zone de liste est l’objet ciblé, elle ne peut pas répondre aux frappes de touches.

Alors comment résoudre ce problème puisqu’il ne semble pas y avoir de moyen de collecter les frappes de touches ?

Placez la zone de liste dans un sous-formulaire

La première étape consiste à placer la zone de liste dans un sous-formulaire (dans la base de données d’exemple, ce formulaire s’appelle LB). Ok … mais comment collecter les frappes au clavier ? En utilisant des boutons invisibles auxquels sont attribués des « raccourcis ».

À leur tour, tous les raccourcis appellent une méthode pour déterminer le texte à rechercher, le localiser dans la zone de liste et le mettre en évidence pour l’utilisateur. Vous pouvez suivre cette explication si vous ouvrez le formulaire LB de la base de données Listbox Clairvoyance.

La boîte de liste a le nom d’objet, LB_Browser. Ses propriétés incluent :

La sélection d’entité est appelée Form.es (dans le contexte du sous-formulaire LB).

Au bas du formulaire LB , il y a une collection de boutons. Chacun d’eux est associé à une touche de raccourci. La rangée du bas peut sembler peu claire, mais elle gère les touches ESPACE, – et _. Vous pouvez en ajouter d’autres si nécessaire.

Les propriétés de chacun de ces boutons sont illustrées en utilisant la touche « A » comme exemple.

Le nom de l’objet se termine par la LETTRE, le NOMBRE ou le SYMBOLE qu’il génère. L’ESPACE est une exception ; il utilise le symbole ␣ et est « traduit » en ESPACE.

Le titre n’est là que pour clarifier les choses, le dimensionnement horizontal est Déplacer, et le raccourci est la frappe. Le seul événement qui doit être vérifié est On Clicked.

Lorsqu’un utilisateur appuie sur une touche de raccourci, le script de ce bouton est déclenché avec un événement . On Clicked Form event code.

Le script pour chaque bouton est le suivant :

LB_SEARCH_DO (Form; OBJECT Get name)

Interprétation de la frappe de la touche

La méthode de projet LB_SEARCH_DO traite les frappes de touches. Elle utilise le dernier caractère du nom de l’objet pour savoir quelle touche traiter.

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

Ce caractère sera ajouté à la chaîne de recherche ou remplacera la chaîne de recherche, en fonction du temps écoulé depuis la dernière frappe. Dans l’exemple de base de données, toute « attente » supérieure à 1,5 seconde déclenche une nouvelle recherche.

$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
La recherche sur la « colonne de recherche » est effectuée en déterminant quel enregistrement de la sélection d’entités serait la première correspondance, puis en localisant cet enregistrement dans la sélection d’entités (« .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 " )


Le $itemPosition dans la sélection d’entités est déterminé avec :

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

Maintenant, mettez à jour la sélection des lignes de la boîte de liste et faites défiler pour que l’utilisateur puisse voir le résultat. Nous le montrons à la ligne 5 dans la boîte de liste pour donner un certain contexte.

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;*)

Enfin, pour les besoins de la démo, nous chargeons l’entité sélectionnée dans un objet auquel le formulaire parent peut accéder.

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

Et plus encore

Téléchargez l’IDH ci-dessus pour voir de plus près le concept. En outre, un document exhaustif est inclus pour expliquer la configuration du formulaire parent pour faire fonctionner la boîte de liste, ainsi que des conseils pour concevoir l’interface utilisateur et améliorer l’expérience utilisateur.

J’espère que cela vous aidera dans votre prochain projet 4D !