T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
7th March

Google AJAX Suggest kopija

Google AJAX Suggest je občudovanja vredna koda, ki sem jo (zaradi izziva) probal napisati tudi sam, seveda na veliko bolj preprost način z sledečo (osnovno) funkcionalnostjo:

  • iskanje z AJAX-om in dodajanje rezultatov v div
  • preprečevanje klica skripte za iskanje med tipkanjem (šele ko uporabnik neha tipkati se prikažejo rezultati) (onkeyup event)
  • možnost premikanja po rezultatih z tipkami, esc odstrani seznam, enter zapiše trenutno izbrano vrednost

Princip delovanja Google Suggest je preprost. Medtem, ko uporabnik tipka iskalni niz se mu prikazujejo najbolj relevantni rezultati (ter število zadetkov za izbrani niz). Uporabnik se lahko nato med podanimi rezultati premika z puščicami (gor, dol), izbira (enter) ali prekliče (esc) nadalnjo iskanje. Za AJAX klice sem uporabil mojo knjižnico, ki sem jo že opisal na blogu. Najprej potrebujemo HTML kodo in sicer:

[html]

[/html]

Suggest list div bo primarni div (container) v katerega bomo dodajali rezultate, search input pa bo skrbel za klicanje javascript funkcije, ki skrbi za premikanje po rezultatih, izbiro rezultata (enter) ter preklic iskanja (esc) in seveda tudi za iskanje z AJAX-om (kot povedano že zgoraj). Ker je kode za objavo preveč si oglejmo le (meni) najbolj zanimiv del in sicer premikanje po rezultatih:

[javascript]
//RM05062007 38 -> keyup, 40 -> keydown
if (key == 38 || key == 40){
if (ss.childNodes.length !== 0 && ss.childNodes[0].tagName == ‘DIV’){
var next = 0;

//RM05062007 Go trough all div-s and check which has the proper css class name, unselect it when found
for(var i=0; i < ss.childNodes.length; i++){
if (ss.childNodes[i].tagName === 'DIV'){
if (ss.childNodes[i].className == 'suggest_link_over'){
ss.childNodes[i].className = 'suggest_link';

//RM05062007 Check which key was pressed
if (key == 40){
next = i+1; //keydown

//RM05062007 Check if we are at the end of suggestions, go to the begining (stack switch)
if (next == ss.childNodes.length){
next = 0;
}
}else{ //keyup
if (i == 0){
next = ss.childNodes.length;
next = next-1;
}else{
next = i-1;
}
}

//RM05062007 Select an item
selectSuggestion(ss.childNodes[next], search_input);
return;
}
}
}

//RM05062007 Currently no div is selected
if (key == 40){
//RM05062007 Start with the first one
next = 0;
}else{
next = ss.childNodes.length; //lastone if keyup
next = next-1;
}

selectSuggestion(ss.childNodes[next], search_input);
}
return;
}
[/javascript]

Kratko pojasnilo. Najprej pregledamo katero tipko je uporabnik pritisnil (gor ali dol), nato gremo skozi vse rezultate ter se pomaknemo enega gor oz. dol od trenutnega izbranega. Če trenutnega izbranega ni izberemo prvega oz. zadnjega.

Ker nimam več dostopa do strežnika, kjer sem to razvijal sem bil primoran uporabiti backup, ki pa ni vseboval CSS kode, zato sem jo kopiral iz Dynamic Ajax strani, ki je bila tudi moja glavna referenca pri izdelavi svojega Google Suggest-a v času izdelave. Še nekaj dodatnih stvari (informacij):

Datoteke:

Delodajalec: Positiva.si


2x komentirano na “Google AJAX Suggest kopija”

  1. .: TRSplet - internetne storitve .: » Blog Archive » AJAX iskanje in dodajte v seznam (select) z dodatnimi informacijami je napisal:

    [...] Google AJAX Suggest kopija [...]

  2. Boško je napisal:

    Svaka čast…super tutorial … čestitam …sicer sem moral spremenit inc datoteko v php…ampak deluje…in to super

Dodaj komentar

You must be logged in to post a comment.