JavaScript a hledání v roletovém menu

JavaScript je vcelku silný pomocník pro lidi píšící webové aplikace a lze pomocí něj uživateli zpříjemnit práci a ne jenom nechat vyskakovat mraky nových okének. Jedna taková užitečná věcička, kterou lze v JavaScriptu vytvořit, je hledání v roletovém menu.

Pokud píšete větší aplikace s využitím internetových technologií, už jste určitě narazili na problém jak zobrazit dlouhý číselník. Lze ho zobrazit ve formě odkazů, pomocí rozbaleného <SELECTu>, či nezobrazit vůbec a použít vyhledávání. Osobně preferuji <SELECT> pokud položky nejdou do tisíců. Pak je to o dělení do skupin a až pak "můj oblíbený" <SELECT>. Orientaci v dlouhém seznamu nám <SELECT> usnadní tím, že umí hledat podle prvního znaku. Ale ne vždy to musí postačovat. Hodilo by se vyhledávání podle více znaků. Napsal jsem si proto jednoduchý script, který to umožňuje.

Jedná se vlastně o cyklické prohledávání seznamu podle vstupu uživatele. V <SELECTu> jsou jednotlivé položky tvořeny pomocí <option value=hodnota>TEXT</option>. Pro náš skript je důležité vědět co je obsahem jednotlivých položek. Ten lze přečíst pomocí JavaScriptu takto – document.jmeno_formulare.jmeno_selectu.options[i].text. 

Pro demonstraci si vytvoříme jednoduchý formulář, který bude obsahovat pole pro zadávání textu, který se má hledat a samotný <SELECT>.

Ke sledování textu, který uživatel napíše do textového boxu, si napíšeme jednoduchou funkci, která v časové smyčce 100 ms porovnává hodnotu proměnné lastValue s obsahem textboxu. Pokud se hodnoty liší, uloží se obsah textboxu do proměnné lastValue a zavolá se funkce QuickSearch.

Funkce QuickSearch projde položky options v <SELECTu> a porovná jejich textový obsah s obsahem textboxu. Pokud obsah některé položky začíná na text v textboxu, provede se výběr dané položky a funkce je ukončena. Pokud žádná položka nevyhovuje, funkce zjistí, zda je některá položka vybrána. Pokud ano, provede se její odznačení. Zda je některá položka v <SELECTu> vybrána, zjistíme pomocí vlastnosti selectedIndex, kterou <SELECT> poskytuje. Pokud je tato hodnota -1, žádná položka není vybrána. <SELECT> je indexován od 0.

No a teď už nám zbývá jenom spustit časovač. To je v našem případě nejlepší udělat ihned po načtení stránky, takže využijeme události onLoad, kterou vložíme do sekce BODY.

Pokud si zkusíte tento script v Netscape, zjistíte, že funguje až od okamžiku kdy kurzor opustí textbox. Pokud se vám to zdá divné, vězte, že mě také. Podařilo se mi přijít na malou obezličku, která spočívá v tom, že se na začátku funkce ChangeChecker() textboxu odebere focus, provede se tělo funkce a pak se textboxu focus vrátí. Budete muset odblokovat 2 vykomentované řádky v této funkci pro plné zprovoznění scriptu i pro Netscape.

Vypadá to, že u Netscape se provádí aktualizace vlastnosti value pomocí události onChange, která se dle specifikace volá až po ztrátě zaměření prvku. Což mi přijde poněkud nesmyslné. Tato vlastnost má přeci odrážet aktuální stav, ale u Netscape nefunguje více věcí.

ukázka zde

Script je odzkoušen v MS IE 5 a NC 4.75 a měl by chodit i v trojkových verzích prohlížečů – ale ruku do ohně za to nedám :).