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

Automaticky přeloženo z Deepl

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ří:

blank

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ší.

blank

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.

blank

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!

Chris Belanger
Chris Belanger je vývojář 4D, který začal psát řešení 4D přibližně v roce 1991 - počínaje verzí 4D v2.0 - v době, kdy pobýval v Yellowknife, NWT, Kanada. Napsal několik systémů pro teritoriální vládu, včetně systému pro správu projektů a terminologické databáze, která korelovala terminologii v osmi jazycích. Chris také napsal databáze 4D pro řízení provozu velkoobchodní společnosti, úklidové a restaurátorské firmy a několika společností poskytujících služby na ropných polích.