Seznam boxů typeahead: Intuitivní vyhledávání v seznamu

hostující autor Chris Belanger, vývojář 4D z Kanady

Seznam boxů typeahead (metoda postupného vyhledávání) není nativní funkcí seznam boxů. Tuto funkci však můžete snadno implementovat pomocí kreativního kódování. V tomto příspěvku na blogu vám tuto techniku předvedu spolu s databázovým příkladem a vyčerpávajícím dokumentem vysvětlujícím podrobnosti krok za krokem.

Konečný výsledek je shrnut v níže uvedeném GIFu, Ilustruje dvě „vyhledávání“. Jedno pro E-L-L-I-O-T a druhé (po seřazení do sloupců) pro H-A-N-N-A-H:

HDI: Seznambox typeahead

Co chceme udělat?

Když má pole seznamu fokus (ale není v režimu „zadávání“), chceme, aby bylo možné napsat několik znaků a aby se pole seznamu posunulo a vybralo nejbližší shodu podle „sloupce třídění“. Pokud je například řazeno podle názvu firmy, chceme začít psát název firmy a nechat jej vyhledat a zvýraznit v poli seznamu. Pokud je však pole seznamu zaměřeným objektem, nemůže reagovat na stisky kláves.

Jak tedy můžeme tento problém vyřešit, když se zdá, že neexistuje způsob, jak shromažďovat stisky kláves?

Umístěte pole seznamu do podformuláře

Prvním krokem je umístění pole seznamu do podformuláře (v ukázkové databázi se tento formulář nazývá LB). Dobře… ale jak budeme shromažďovat stisky kláves? Pomocí neviditelných tlačítek s přiřazenými „zkratkami“.

Všechny klávesové zkratky zase volají metodu, která určí hledaný text, vyhledá jej v poli seznamu a zvýrazní jej uživateli. Tento výklad můžete sledovat, pokud si otevřete formulář LB v databázi Listbox Clairvoyance.

Seznamové pole má název objektu LB_Browser. K jeho vlastnostem patří:

Výběr entity se nazývá Form.es (v kontextu dílčího formuláře LB).

Ve spodní části formuláře LB se nachází kolekce tlačítek. Každé z nich má přiřazenou klávesovou zkratku. Spodní řada se může zdát nepřehledná, ale obsluhují ji klávesy MEZERNÍK, – a _. V případě potřeby můžete přidat další.

Vlastnosti každého z těchto tlačítek jsou ilustrovány na příkladu klávesy „A“.

Název objektu končí písmenem, číslem nebo symbolem, který generuje. Výjimkou je MEZERNÍK, který používá symbol ␣ a je „přeložen“ na MEZERNÍK.

Nadpis je pouze pro upřesnění, Horizontální velikost je Přesunout a zkratka je klávesová zkratka. Jediná událost, která by se měla kontrolovat, je On Clicked.

Když uživatel stiskne klávesovou zkratku, spustí se skript pro toto tlačítko s příznakem On Clicked Form event code.

Skript pro každé tlačítko je následující:

LB_SEARCH_DO (Form; OBJECT Get name)

Interpretace stisknutí klávesy

. LB_SEARCH_DO projektu zpracovává stisknutí kláves. Ke zjištění stisknuté klávesy, kterou má zpracovat, používá poslední znak názvu objektu.

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

Tento znak se buď připojí k vyhledávacímu řetězci, nebo jej nahradí, v závislosti na době, která uplynula od posledního stisknutí klávesy. V ukázkové databázi se při jakémkoli „čekání“ delším než 1,5 sekundy spustí nové vyhledávání.

$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
Vyhledávání ve „sloupci hledání“ se provádí tak, že se určí, který záznam ve výběru entit by byl první shodou, a poté se tento záznam vyhledá ve výběru entit („.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")


$itemPosition v rámci výběru entit se určuje pomocí:

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

Nyní aktualizujte výběr řádku v seznamu a posuňte jej tak, aby uživatel viděl výsledek. Zobrazíme jej na řádku 5 v poli seznamu, abychom uvedli určitý kontext.

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

Nakonec pro účely ukázky načteme vybranou entitu do objektu, ke kterému má nadřazený formulář přístup.

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

A další

Stáhněte si výše uvedené HDI, abyste se s tímto konceptem seznámili blíže. Navíc je přiložen vyčerpávající dokument, který vysvětluje konfiguraci nadřazeného formuláře pro obsluhu pole se seznamem, a také tipy pro návrh uživatelského rozhraní a zvýšení uživatelského komfortu.

Doufám, že vám to pomůže s vaším dalším projektem 4D!