Ste vedeli? Podjetje TRSPLET s.p. je 4.maja 2015 spletno stran preusmerilo na Optiweb.

Podjetje Optiweb je na trgu že 6 let in ponuja celostno storitev spletnega nastopa. Poskrbimo za izdelavo spletnih strani na sistemu Wordpress in spletnih trgovin na platformi Magento.

Ukvarjamo se tudi z različnimi kanali spletnega marketinga; od različnih Google Adwords oglasov do Facebook oglaševanja. Posebej ponosni smo na naše uspehe pri optimizaciji spletnih mest za iskalnike, kjer že od začetka dosegamo odlične rezultate.

Želite predloge in nasvete, kako izboljšati vaš spletni nastop? Kontaktirajte nas prek
spletnega obrazca.

kuverta Lahko pa se vpišete tudi na seznam prejemnikov naših mesečnih e-novic, v katerih predstavljamo najnovejše trende (poslovnega) spletnega sveta. Nanje se lahko prijavite tukaj.

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.