Ideja je načemoma dokaj enostavna. Ob vsakem dogodku (event) pritiska na tipko je potrebno izvesti XML HTTP zahtevo (XMLHttpRequest) in nato ustrezno obdelati rezultate in jih vtakniti v DOM.

Seveda se je zapletlo že pri lovljenju dogodkov. Koda, ki bi jo moral spisati, je bila obsežna, poleg tega pa takrat nisem dobro poznal DOM in bi verjetno marsikaj naredil narobe.

Potem sem našel jQuery, ki je močno poenostavil lovljenje dogodkov in klicanje AJAX zahtev, žal pa še vedno nisem bil na čistem z DOM (in CSS, če smo že pri tem) zato mi je zanimanje za sprotno iskanje splahnelo oz. sem ga preložil na poznejši čas. Ni kaj, s prevečimi stvarmi se res ne gre ukvarjati.

Tri dni nazaj pa sem se spet spomnil nanj. Malce tudi zato, ker sem že krepko zamujal z dodajanjem oznak (tag-ov) k besedilom. Hja, vsi blogi (Marko me je opozoril, da je mnogo lepši izraz dnevnik) jih imajo, pa sem jih moral dodati še jaz. Zakaj? Da razgibam svoje sive celice.

V Google sem k sreči vtipkal pravo čarobno besedo: autocomplete. Med rezultati je bil pri vrhu tudi zapis iz jQuery UI, podprojekta jQuery, ki se ukvarja z uporabniškim vmesnikom. Ker jQuery UI že uporabljam na servisnem delu, drugih rezultatov nisem niti gledal! Žal sem uporabljal jQuery UI starejše verzije (1.7), ki autocomplete metode ni imel, zato je sledilo nadgrajevanje.

Lepota jQuery UI Autocmplete metode je v tem, da poskrbi za vse. Ja, čisto vse, razen seveda iskanja samega. Lovi dogodke pritiskov na tipke za izbrano polje, kliče AJAX skripto za iskanje, obdela rezultate in jih prikaže ob vnosnem polju s čisto vsemi funkcijami, ki jih običajen uporabnik pozna (navigacija s smernimi tipkami, izbira z miško, ...).

Preostalo mi je zgolj pisanje iskalne skripte, ki pa mora rezultate namesto v HTML obliki vračati v JSON formatu. JSON ali na dolgo JavaScript Object Notation je zelo strjena oblika zapisa objekto, podobno kot XML, le da z mnogo manj tekstualnega balasta.

No pa poglejmo, kako zadevo implementiramo. Najprej na <INPUT> polje pripnemo autocomplete jQuery metodo:

$("#search").autocomplete({
source: "search.php",
minLength: 3,
delay: 500,
select: function( event, ui ) {
document.location = "index.php?ID=" + ui.item.id;
}
});

Nato izdelamo iskalno skripto, ki mora podatke vrniti v naslednji obliki:

[
{"id":"1","label":"Prva labela","value":"Prva vrednost"},
{"id":"2","label":"Druga labela","value":"Druga vrednost"}
]

<?php
$res = $db->getresults( "select * from tabela where fld like '%".$_GET['term']."%'");
echo "[";
if ( $res ) foreach ( $res as $val ) {
echo "{ ";
echo ""id": "". $val->ID . "", ";
echo ""label": "". $val->Label . "", ";
echo ""value": "" . $val->Title . "", ";
echo "},";
}
echo "]n";
?>

In seveda ustrezen CSS, ki poskrbi za prikaz indikacije o iskanju na spletni strani:

<style>
.ui-autocomplete-loading { background: white url('spinner.gif') right center no-repeat; }
</style>

V resnici zelo enostavno in še bolj učinkovito.