Vyhledávání v dlouhém selectboxu JavaScriptem

O usnadnění navigace a vyhledávání v dlouhém tomtoselectboxu jsme už několikrát psali. V  článku si ukážeme, jak naučit prohlížeč Internet Explorer vyhledávat v seznamu slovo podle stisknutých kláves, jak to umí například Mozilla, a to i bez přídavného textového pole, jak je popsáno v článku z roku 2000…

Od dob vzniku článku JavaScript a hledání v roletovém menu vývoj prohlížečů urazil už delší cestu a tak v něm popsanou funkci umí většina prohlížečů sama. Opera i Mozilla je schopná v dlouhém seznamu vyhledat výraz přesně podle stisků klávesnice. IE bohužel dodnes reaguje na každý stisk klávesy vyhledáním výrazu, který na písmeno dané klávesy začíná. A protože mi funkce popsaná v původním článku, kde se k zadání vyhledávaného výrazu používá navíc ještě textové pole, nevyhovovala, pokusil jsem se vyvinout obdobnou funkci, která však zvláštní textové pole nevyžaduje.

Pro získání znaku ze stisknuté klávesy jsem se inspiroval článkem Velikonoční vajíčko ve webové stránce. Zde je prostě odchytávána událost onkeypress, ověří se, zda jde o prohlížeč Internet Explorer nebo Opera (v jiných prohlížečích je naše funkce zbytečná, protože ji umějí samy a leckdy lépe), následně kód klávesy převedeme na znak a můžeme jej dále zpracovat. Hledaný výraz navíc pro přehlednost vypisujeme do stavového řádku – ve zmíněné již popsané aplikaci byl hledaný text vidět v dodatečném textovém poli. Prohlédněte si ukázku (zdrojový kód) – klepněte na selectbox a postupně stiskněte například arm, sledujte přitom stavový řádek prohlížeče.

Formulář s dlouhým selectboxem a obslužným skriptem:

 <form name=“myform“ method=“post“ action=“Default.aspx“ id=“myform“>
  <script type=“text/javascript“>
  <!– <![CDATA[
  function __getDdlKey(e)
  {
    var code;
    if (!e)
    var e = window.event;
    if (e.keyCode)
      code = e.keyCode;
    else
      if (e.which)
        code = e.which;
    return code;
  }
  var lastValue = “;
  function __searchDdlReset()
  {
    lastValue = “;
    window.status = “;
  }
  function __searchDdlList(eventObj,slcObj)
  {
    if (navigator.userAgent.indexOf(‚MSIE‘) > -1 || navigator.userAgent.indexOf(‚Opera‘) > -1)
    {
      var lastKey = __getDdlKey(eventObj);
      if (lastKey == 8 && lastValue.length > 1)
        lastValue = lastValue.substring(0,lastValue.length-1);
      else
        lastValue += String.fromCharCode(lastKey);
      window.status = ‚Najít: ‚ + lastValue;
      for (i=0; i<slcObj.length; i++)
      {
        if ((slcObj.options[i].text.toLowerCase().indexOf(lastValue.toLowerCase()) == 0) && (lastValue.value != “))
        {
          slcObj.options[i].selected = true;
          return false;
        }
      }
      return false;
    }
    else
      return true;
  }
  //]]> –>
  </script>
  <select name=“DropDownList2″ id=“DropDownList2″ onblur=“__searchDdlReset();“ onclick=“__searchDdlReset();“ onkeypress=“return __searchDdlList(event,this);“>
    <option value=“Arabština (Saúdská Arábie)“>Arabština (Sa&#250;dsk&#225; Ar&#225;bie)</option>
    <option value=“Arabština (Irák)“>Arabština (Ir&#225;k)</option>
    <option value=“Arabština (Egypt)“>Arabština (Egypt)</option>
    .
    <option value=“Divehština (Maledivy)“>Divehština (Maledivy)</option>
  </select>
</form>

Vysunovací nabídka select je doplněna atributy pro obsluhu událostí onkeypress pro zjišťování stisknutých kláves hledaného výrazu a onblur, onclick pro zajištění vynulování (vyprázdnění) proměnné (bufferu) pro hledaný výraz v případě, že klikneme na element klikneme nebo element ztratí zaměření (focus).

Při postupném stisku kláves je předávána výsledná logická hodnota volání funkce __searchDdlList. Pokud je true, stisk klávesy je probublán dále a dojde ke zpracování jako obvykle. Pokud je stisk klávesy zpracován uvnitř funkce, je další zpracování stornováno předáním hodnoty false. V obslužné funkci nejprve ověříme, zda jde o prohlížeč Internet Explorer nebo Opera otestováním hodnoty navigator.userAgent. Pokud nejde o žádný z těchto prohlížečů, jednoduše ukončíme funkci návratovou hodnotou true.

Pro vyhledávaný výraz máme založenou proměnnou lastValue. Stisknutou klávesu zjistíme pomocí funkce __getDdlKey, která je převzata z výše zmiňovaného článku o velikonočním vajíčku. Pokud je předána nějaká hodnota a je různá od „8“ (hodnota Backspace), přidáme znak klávesy (zjistíme jej metodou String.fromCharCode() ), jinak hodnotu lastValue o jeden znak zmenšíme (při stisku Backspace se jeden znak z hledaného výrazu smaže). Následně nastavíme nový text do stavového řádku prohlížeče – zde zobrazíme text Najít: a aktuální hodnotu lastValue. Poté použijeme cyklus pro prohledání seznamu a nastavení hledané hodnoty – funkce je popsána v již zmíněném článku o hledání v roletovém menu. Ať je výraz nalezen nebo ne, ukončíme funkci návratovou hodnotou false, aby se neprováděla původní funkce implementovaná v prohlížeči – ta by totiž s naší funkcí kolidovala a tak by nebylo možné postupné hledání nikdy dokončit.

Všimněte si, že korektní vymazání jednoho hledaného znaku je možné v prohlížeči Opera, IE bohužel reaguje na Backspace dříve, než je prováděna obsluha událostí elementů stránky, a tak zde dojde k přechodu na předchozí stránku. To však neznamená, že to v budoucích verzích nebude změněno a chování bude obdobné jako u prohlížeče Opera.

Kdo chce uživatelům nabídnout maximální komfort při práci se seznamem, může uvedený skript zkombinovat se skriptem pro snazší navigaci v dlouhém selectboxu.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.