JavaScript pro snazší navigaci v dlouhém selectboxu

24. července 2003

•

Pokud máme ve stránce selectbox s desítkami až stovkami položek, orientace a dohledání volby není pro uživatele zrovna snadné. Ukážeme si, jak dát k dispozici abecední seznam počátečních písmen výrazů v selectboxu. Písmena v tomto seznamu budou sloužit jako odkaz, který ihned „naroluje“ selectbox na slovo začínající zvoleným písmenem.

Můžeme namítnout, že stejného efektu docílíme, pokud při rozevřeném selectboxu stiskneme patřičné písmeno na klávesnici. To je pravda, ovšem uživatel musí při tomto úkonu použít klávesnici, pokud dáme k dispozici předvolit písmeno myší, ovládání bude komfortnější. Výhodou našeho skriptu je navíc fakt, že jsou vygenerovány pouze písmenné odkazy na ta slova, která se v seznamu nacházejí – pokud například v seznamu není žádné slovo začínající na „q“, v seznamu odkazů se q vůbec neobjeví. K ukázce využijeme dlouhý seznam z článku o volbě země bez databáze, kde jsou zastoupena všechna písmena a vygenerovaný seznam tak bude tvořit celou abecedu. Prohlédněte si ukázku (zdrojový kód).

<form action=““ id=“countryform“ name=“countryform“ method=“GET“>
<select name=“country“ id=“country“>
    <option value=“Afghanistan“>Afghanistan</option>
    <option value=“Albania“>Albania</option>
    <option value=“Algeria“>Algeria</option>
    .
    .
    <option value=“Yugoslavia“>Yugoslavia</option>
    <option value=“Zambia“>Zambia</option>
    <option value=“Zimbabwe“>Zimbabwe</option>
</select>
</form>
<span style=“font-size: 0.6em;“>
<script type=“text/javascript“>
function SetAIndex(fieldname)
{
var field = document.getElementById(fieldname); // objekt našeho prvku SELECT
var optI = 0; // počáteční hodnota indexu pro položky OPTION
var ie = (navigator.userAgent.toLowerCase().indexOf(„msie“) != -1) && (navigator.userAgent.toLowerCase().indexOf(„opera“) == -1); // určit, zda typ browseru je MSIE
if (ie)
    optI=1; // v MSIE zvýšit počáteční index na 1
var optTxt=““; // inicializace pomocí proměnné pro počáteční písmeno
document.write(‚|‘); // začátek pole odkazů – vypsat svislou čáru
while (optI<field.childNodes.length)
{ // procházet podřízené členy elementu SELECT
    if (optTxt != field.childNodes.item(optI).childNodes.item(0).data.substring(0,1))
    { // pokud předchozí hodnota optTxt se liší od prvního písmena, generuj odkaz
      optTxt = field.childNodes.item(optI).childNodes.item(0).data.substring(0,1)
      if (ie) // v MSIE se index pro odkaz musí vypočítat
        document.write(‚<a href=“#’+((optI-1)/2)+'“ onclick=“javascript: document.getElementById(\“+fieldname+’\‘).selectedIndex=’+((optI-1)/2)+‘;return false;“>’+optTxt+'</a>|‘);
      else
        document.write(‚<a href=“#’+optI+'“ onclick=“javascript: document.getElementById(\“+fieldname+’\‘).selectedIndex=’+optI+‘;return false;“>’+optTxt+'</a>|‘);
    }
    optI++;
    if (ie) // v MSIE je potřeba inkrementovat 2x pro procházení pouze lichých členů
      optI++;
}
}
SetAIndex(‚country‘);
</script>
</span>

Naše funkce SetAIndex projde v cyklu podřízené členy (kolekci childNodes) určeného prvku SELECT, jehož jméno je předáno jako parametr funkce. Pomocí členu item(0) a metody substring získáme první písmeno dané textové položky. Index probíhajícího optI cyklu nám zároveň udává index položky v seznamu. Zjištěné písmeno porovnáme s předchozí hodnotou, uloženou v pomocné proměnné optTxt, a pokud jsou rozdílné, vygenerujeme nový odkaz – ten obsahuje povel JavaScriptu pro nastavení vlastnosti selectedIndex daného seznamu a do optTxt uložíme novou hodnotu počátečního písmene. Pokud se shodují, nový odkaz negenerujeme. Dále potom inkrementujeme index našeho cyklu v proměnné optI. Cyklus probíhá, dokud není dosaženo konce seznamu položek – tedy délky, kterou nám udává člen length.

Aby to ovšem nebylo tak jednoduché, je potřeba si říci, že Internet Explorer zachází s podřízeným elementem OPTION jinak než ostatní prohlížeče – textový obsah pole chápe jako další element (jeho obsah bychom mohli získat i pomocí nestandardní vlastnosti innerText). Počet elementů se tedy v tomto prohlížeči zdvojnásobí. Řešením je v tomto prohlížeči pracovat pouze s každým lichým členem, kdy počáteční index zvýšíme z 0 na 1 a při procházení v cyklu inkrementujeme dva krát. Upravit musíme také index, který se generuje do odkazu – aktuální hodnotu optI snížíme o 1 (na skutečnou hodnotu indexu položky OPTION) a vydělíme dvěmi. Ve výsledném skriptu proto vidíte hned na počátku zjištění typu prohlížeče (ošetřuje se i „maskovaná“ Opera) a v další části skriptu již pracujeme v závislosti na hodnotě proměnné ie, která má hodnotu true pouze pokud jde o prohlížeč Microsoft Internet Explorer.

Jak jste si možná všimli, není zde řešeno žádné abecední třídění, odkazy se generují podle změny prvního písmene v položkách OPTION. Pokud bychom zpřeházeli pořadí položek, skript vygeneruje spoustu odkazů (vždy, když se změní počáteční písmeno po sobě jdoucích položek, je vygenerován odkaz). Abecední naplnění selectboxu je tedy ponecháno na tvůrci aplikace. Zpravidla však takový seznam plníme z databáze již setříděným seznamem, takže ani v tom by neměl být problém. Z důvodu jednoduchosti není řešena ani specialita češtiny v podobě písmene „ch“ – pokud se v seznamu objeví, bude po písmenu „h“ vygenerován odkaz na písmeno „c“. Určitě by toto šlo ošetřit, myslím si však, že s ohledem na výsledný vzhled, snahu o co nejmenší rozměr a určitou inteligenci uživatele to není až tak nutné.

V naší vlastní aplikaci je také potřeba upravit si ve volání funkce SetAIndex jméno elementu SELECT na hodnotu, kterou má jeho id. Výsledek skriptu je v dokumentu obalen elementem SPAN, kterým je nastaveno pokud možno malé písmo, aby seznam nezabral až příliš mnoho místa ve stránce.