Chytřejší multifunkční vyhledávání

Důvtipným skloubením znalostí, které již byly publikovány v našich článcích, můžeme například usnadnit vyhledávání v aplikacích, kde se vyhledává často a výsledkem hledání jsou obsáhlejší dokumenty. V takovýchto aplikacích uživatel vyhledává nejen samotné dokumenty, ale i výskyt slova v nalezené stránce. V tomto článku si ukážeme, jak dát uživateli k dispozici oba způsoby najednou v jednom vyhledávacím formuláři.

Nejprve se podívejte na ukázku, čeho vlastně chceme docílit. Uživatelé jistě ocení komfort, pokud vývojář nápaditě skloubí vyhledávání v databázi nebo vyhledávání JavaScriptem a hledání ve stránce (jako náhradu za CTRL-F). A aby toho nebylo málo, doplníme ještě klávesové zkratky a možnost zatržení checkboxu odkazem. V podstatě jde o doplnění pár "prkotinek", které však ti, kteří pracují s aplikací intezivně, určitě ocení – mohou to být pracovníci různých informačních služeb (jízdní řády, cestovní kanceláře), dispečeři nebo pracovníci oddělení péče o zákazníky.

Formulář naší funkční aplikace (předpokládám, že v ní máte textové pole pro vyhledávání a odesílací tlačítko) doplníme podle následující ukázky:

<script type="text/javascript" src="SearchInPage.js"></script>
<form action="search.html" target="main" onsubmit="if (this.inpage.checked) { findInPage(this.SearchString.value); return false};">
<input type="text" name="SearchString" id="SearchString" onchange="n = 0;" size="10" maxlength="50" /><br />
&nbsp;&nbsp;<input type="checkbox" name="inpage" value="1" accesskey="s" />
<span onclick="inpage.checked=true; return false" title="Zatrhněte pro vyhledání zadaného výrazu ve&nbsp;stránce&nbsp;(jako&nbsp;CTRL-F). K vyhledání dalšího výskytu slova v téže stránce použijte ALT-H, pro přepínání režimu hledání můžete použít ALT-S.">v této <u>s</u>tránce</span><br />
<button type="submit" accesskey="h"><u>H</u>ledej</button>
</form>

V části kódu s formulářem vidíme zavedení souboru JavaScriptu pro hledání ve stránce z již uveřejněného článku. Kromě pole pro vyhledávání je doplněn checkbox pro přepnutí režimu vyhledávání, má nastaven accesskey="s" pro klávesovou zkratku.

Odesílací tlačítko je nahrazeno tagem button, aby bylo možné klávesovou zkratku vyznačit podtržením znaku také v textu tlačítka (pokud bychom použili klasický input nemůžeme zobrazit podtržené jen jedno písmeno, formulář by nebyl intuitivní) – je uvedena accesskey="h", odeslat formulář a tedy opakované hledání lze provést klávesovou zkratkou ALT-H. 

Dále vidíme, že doprovodný text u zatržítka je uzavřen do bloku span – je to proto, abychom mohli i na tomto textu obsluhovat událost onclick a umožnili tak uživateli zatrhnout checkbox i jen kliknutím na tento text, aniž by se musel strefovat do zatrhávacího políčka. Uzavření do spanu nám dává také možnost uvést nápovědu do atributu title, takže uživateli se při najetí myší na text u checkboxu zobrazí kontextová nápověda.

K textovému poli je doplněna obsluha události onchange, jak to požaduje skript pro vyhledávání ve stránce.

V tagu formuláře je uvedena obsluha události onsubmit – zde se ověří, zda není zatržen checkox, pokud ano, aktivuje se funkce findInPage() a odesílání formuláře se stornuje předáním návratové hodnoty false.

V závislosti na tom, zda v naší aplikaci používáme rámce (jako v naší ukázce) je potřeba případně upravit použitý skript pro vyhledávání ve stránce, aby vyhledával v patřičném okně.

Implemetace tedy sestává z doplnění pár věcí do formuláře, přidání souboru skriptu pro vyhledávání a jeho úprava pro hledání ve stávajícím dokumentu nebo okně (viz přechozí článek). Ukázku si můžete stáhnout.

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

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