Nápověda jako vystřižená z Windows – vyhledávání

18. července 2001

V tomto třetím dílu miniseriálu o simulaci Windows nápovědy pomocí JavaScriptu si ukážeme, jak doplnit celý systém nápovědy o funkci vyhledávání.

Opět, jako obvykle, začneme malou ukázkou. Nápovědní data, nad kterými se vyhledává, jsou stejná jako v předchozích dílech, takže si můžete vyzkoušet třeba vyhledání klíčového slova „ASP“ či „Java“ (vyhledávání nerozlišuje velká/malá písmena). Hledaný text zapište do prvního textového okénka v tabulce a stiskněte tlačítko „Hledat“. V levém dolním okně se poté zobrazí seznam nalezených témat, z nichž kliknutím na příslušné téma zobrazíte samotný text nápovědy do pravého okna.

JS Nápověda
 

I tentokrát si, vzhledem k velikosti skriptu, popíšeme pouze změny oproti minulému, potažmo předminulému článku, v nichž bylo definováno jádro nápovědy a vyhledávání pomocí rejstříku (indexu).

Začneme HTML kódem formuláře, který opět doznal určitých změn – připomínám, že přepínání mezi jednotlivými pohledy na nápovědu (tj. „klasický“ rozbalovací strom, rejstřík a nyní hledání) se děje přepínáním celých HTML stránek, a můžeme si tedy dovolit na každé stránce definovat zcela jiný formulář. Na rozdíl od minulého dílu nám ve formuláři přibylo textové pole pro vložení vyhledávaného textu a tlačítko „Hledat“, naopak chybí první pole SELECT, ve kterém byl umístěn seznam témat či rejstřík:

<form name="menu">
<table border="0" cellpadding="0" cellspacing="0" width="200" bgcolor="#C0C0C0">
<tr>
    <td align="left" colspan="2" bgcolor="#000080"><font color="#FFFFFF"><strong>JS Nápověda</strong></font></td>
</tr>
<tr>
    <td align="left" valign="top">
        <input type="text" name="findtext" size="11">
        <input type="button" onClick="h1.Search(this.form.findtext.value)" value="Hledat" name="search">
    </td>
    <td align="left" valign="top" rowspan="2"><textarea rows="9" name="popis" cols="28">&nbsp;</textarea></td>
</tr>
<tr>
    <td align="left" valign="top">
        <select name="sublinks" size="10" onChange="h1.Index.WriteTxt()">
        <option value="0">************************</option>
        </select>
    </td>
</tr></table></form>

Povšimněte si rovněž handlerů jednotlivých událostí na formuláři. Handler události onChange na SELECT poli s názvem „sublinks“ se proti minulu nezměnil (využíváme téhož formulářového pole a téhož kódu, jaký byl napsán pro nápovědní rejstřík). Přibyl handler události onClick na tlačítku „Hledat“, který volá novou metodu objektu MeHelp (respektive jeho instance h1), nazvanou Search. Protože do metody Search je přímo jako parametr předáván hledaný text, odpadá nutnost „provazovat“ formulářové pole findtext s objektem MeHelp pomocí modifikace metody SetForm.

K metodě Search se dostaneme za malý okamžik, teď si ještě ukážeme skript za formulářem, který má stejně jako v předchozích dílech čistící a „prolinkovávací“ úkoly:

h1.SetForm( document.menu.links, document.menu.popis, document.menu.sublinks );
h1.DeleteSubField();

První řádek naváže přesně stejnou syntaxí jako minule formulář na instanci objektu MeForm (i když v tomto formuláři pole „links“ neexistuje, použitému skriptu to nevadí, puristé ovšem mohou předat null), druhý řádek vyčistí SELECT pole „subfield“ od prvního řádku s hvězdičkami (tím bráníme Navigatoru, aby nám zpočátku prázdné SELECT pole „nesmrskl“ na minimální šířku).

Do objektu MeHelp přibyla výše zmíněná metoda Search – a to je vlastně vše, protože ostatní funkce nápovědy už zajistí kód napsaný dříve. Zde je tedy kód metody Search:

    this.Search = function( st ) {
        this.DeleteSubField()   
        var re = new RegExp(st, "i")
        for( var i=1; i<=this.iLength; i++ ) {
            if(this.arrTexts[i].search(re) != -1) {
                this.subfield.options[this.subfield.options.length] = new Option(this.arrNames[i]);
                this.subfield.options[this.subfield.length-1].value = i
            }             
        }
    }

Předaný parametr st určuje hledaný text; z něj pomocí RegExp vyrobíme výraz pro hledání bez rozlišení malých/velkých písmen. Ostatek metody nejprve vyčistí pole se seznamem nalezených témat a pak do něj postupně přidá všechna témata, v jejichž nápovědním textu byl nalezen hledaný výraz.

Náměty na úpravy

se tentokrát týkají výlučně metody Search a závisí také na tom, jakou funkčnost od metody požadujete – nemusí jít tedy nutně o vylepšení: metoda Search může prohledávat nejen texty nápovědy, ale také nadpisy (stačí přidat jedno OR do podmínky v metodě), kromě toho můžete chtít změnit chování v případě prázdného hledaného řetězce – zde jsou vypsána všechna témata, nechcete-li vypisovat žádné téma, pomůže jednoduché zapouzdření celé metody do příslušné podmínky.

Skript také neumí jednu vlastnost Windows nápovědy – a zde už se jedná jednoznačně o vylepšení, ale také o hlubší zásah do skriptu: zadáte-li ve Windows jako hledaný text prvni_slovo mezera druhe_slovo, systém vyhledávání toto pochopí a interpretuje jako hledání prvni_slovo AND druhe_slovo – zúží tedy podstatně okruh nalezených témat. Zde tomu tak není, hledá se přesná syntaxe včetně mezery, což pochopitelně vede obvykle k výsledku „nalezeno 0 témat“. Budete-li mít zájem, můžeme si v rámci nějakého „service packu“ příště toto vylepšení ukázat.

Přeji vám příjemný den.

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *