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

reference spletnih strani
« Internet Explorer 8 beta1 na voljo
IE8 lahko emulira IE7 prikaz (render mode) »
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:

PLAIN TEXT
HTML:
  1. <input type="text" value="p" id="search_input" onkeyup="getGenericSuggestions(event, 'search_input', 'suggest_list');" />
  2. <div id="suggest_list"/>

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:

PLAIN TEXT
JAVASCRIPT:
  1. //RM05062007 38 -> keyup, 40 -> keydown
  2. if (key == 38 || key == 40){
  3.     if (ss.childNodes.length !== 0 && ss.childNodes[0].tagName == 'DIV'){
  4.         var next = 0;
  5.  
  6.         //RM05062007 Go trough all div-s and check which has the proper css class name, unselect it when found
  7.         for(var i=0; i <ss.childNodes.length; i++){
  8.             if (ss.childNodes[i].tagName === 'DIV'){
  9.                 if (ss.childNodes[i].className == 'suggest_link_over'){
  10.                     ss.childNodes[i].className = 'suggest_link';
  11.  
  12.                     //RM05062007 Check which key was pressed
  13.                     if (key == 40){
  14.                         next = i+1; //keydown
  15.  
  16.                         //RM05062007 Check if we are at the end of suggestions, go to the begining (stack switch)
  17.                         if (next == ss.childNodes.length){
  18.                             next = 0;
  19.                         }
  20.                     }else{ //keyup
  21.                         if (i == 0){
  22.                             next = ss.childNodes.length;
  23.                             next = next-1;
  24.                         }else{
  25.                             next = i-1;
  26.                         }
  27.                     }
  28.  
  29.                     //RM05062007 Select an item
  30.                     selectSuggestion(ss.childNodes[next], search_input);
  31.                     return;
  32.                 }
  33.             }
  34.         }
  35.  
  36.         //RM05062007 Currently no div is selected
  37.         if (key == 40){
  38.             //RM05062007 Start with the first one
  39.             next = 0;
  40.         }else{
  41.             next = ss.childNodes.length; //lastone if keyup
  42.             next = next-1;
  43.         }
  44.  
  45.         selectSuggestion(ss.childNodes[next], search_input);
  46.     }
  47.     return;
  48. }

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

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. AJAX iskanje in dodajanje v seznam (select) z dodatnimi informacijami
  2. AJAX Gmail indikator – prikaz statusnega okna pri AJAX operacijah
  3. AJAX iskanje datotek, dodajanje v seznam ter predogled le teh (PDF, jpeg)
  4. AJAX na enostaven način
  5. Stalno osveževanje del spletne vsebine – ajax jquery.get – javascript setinterval
  6. Rezanje teksta po koncu besede – php funkcija – substr – cut text – UTF-8
  7. Kako preprečiti dvojno pošiljanje obrazca z pomočjo Javascript-a (form submit)
  8. Implementacija Google maps v spletno stran
  9. Novi Google Chrome 2 beta
  10. jQuery each snippet

Roky || Friday, March 7th, 2008 ob 1:20 am || Splet, Splet (Javascript, Ajax), Splet (PHP & MySQL) || RSS 2.0 | Dodaj komentar || Trackback


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:
    March 9th, 2008 ob 4:15 pm

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

  2. Boško je napisal:
    April 6th, 2010 ob 5:21 pm

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

Dodaj komentar