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

reference spletnih strani
« IE8 lahko emulira IE7 prikaz (render mode)
Javascript – delci uporabne kode »
9th March

AJAX iskanje in dodajanje v seznam (select) z dodatnimi informacijami

Na blogu smo že obdelali kopijo Google AJAX Suggest, ki nam ponuja relevantne oz. poskuša posredovati rezultate medtem ko uporabnik tipka iskalni niz. Obstaja pa tudi druga zanimiva možnost iskanja z AJAX-om - (in seveda še tisoč drugih) pri katerem uporabniku dobljene rezultate po iskanju dodamo v HTML select (spustni seznam - dropdown), zraven pa pri vsaki opciji (HTML Option) shranimo še nekaj dodatnih informacij z pomočjo attributov.

Naš primer bo iskanje vrednostnih papirjev kjer rezultate shranimo v spustni seznam (ime vrednostnega papirja), shranimo pa tudi dodatne informacije in sicer v našem primeru vrednost vrednostnega papirja ter valuto. Ko uporabnik klikne na eno izmed opcij v spustnem seznamu (HTML select) izračunamo celotno vrednost (število * vrednost papirja) ter zapišemo ime valute, ki je privzeta valuta za izbran vrednostni papir.

AJAX iskanje je podobno AJAX Google suggest kopija iskanju. Ko uporabnik vpiše iskalni niz pokličemo PHP skripto. Da bi preprečili konstantno klicanje smo dodali vmesno fazo, ki sproži iskanje šele po 0.6 sekunde ne-aktivnosti uporabnika, torej počaka 0.6 po tem ko uporabnik neha tipkati:

PLAIN TEXT
JAVASCRIPT:
  1. function searchPapers() {
  2.     if (searching!=null) {
  3.         clearTimeout(searching);
  4.     }
  5.  
  6.     searching = setTimeout("preformAJAXSearch();", 600);
  7. }
  8.  
  9. function preformAJAXSearch() {
  10.     sendRequest('ajax_select_search.php', 'm=search', 'papersSearched', 'GET', 'An error occured while trying to preform search. Please inform admin staff.')
  11. }

Dobljene rezultate dodamo v spustni seznam, shranimo pa kot zgoraj omenjeno tudi dodatne informacij, del kode:

PLAIN TEXT
JAVASCRIPT:
  1. var option  = document.createElement("option");
  2. option.text = market_code+' - '+paper_name+' ('+paper_title+')';
  3.  
  4. option.title    = currency;
  5. option.className= paper_price;
  6. option.value    = paper_id;
  7.  
  8. try{
  9.     //standards compliant; doesnt work in IE
  10.     select.add(option, null);
  11. }catch(ex){
  12.     //IE only
  13.     select.add(option);
  14. }

Ko uporabnik klikne na eno izmed opcij v seznamu izračunamo vrednost ter nastavimo valuto vrednostnega papirja:

PLAIN TEXT
JAVASCRIPT:
  1. var select              = document.getElementById('paper_name');
  2. document.getElementById('currency').value = select.options[select.selectedIndex].title;
  3.  
  4. var paper_price         = select.options[select.selectedIndex].className;
  5. portfeil_price.value    = parseFloat(quantity)*parseFloat(paper_price);

V našem primeru dodatne informacije shranjujemo v className (class="xxx") ter title, ki ne vplivajo na sam izgled opcije v seznamu ali vrednost le-te.

Datoteke:

Projekt: E-portfelj
Delodajalec: Positiva.si

Deli s skupnostjo:

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

Podobni članki:

  1. AJAX iskanje datotek, dodajanje v seznam ter predogled le teh (PDF, jpeg)
  2. Google AJAX Suggest kopija
  3. Select – dropdown – width – internet explorer
  4. AJAX Gmail indikator – prikaz statusnega okna pri AJAX operacijah
  5. Operacije nad seznami – Javascript DOM – HTML select – HTML option
  6. Javascript – delci uporabne kode
  7. AJAX na enostaven način
  8. MySQL iskanje LIKE vs FULL-TEXT
  9. Stalno osveževanje del spletne vsebine – ajax jquery.get – javascript setinterval
  10. MySQL dupliciranje podatkov z INSERT INTO SELECT stavkom

Antony || Sunday, March 9th, 2008 ob 4:15 pm || Splet, Splet (Javascript, Ajax), Splet (PHP & MySQL) || RSS 2.0 | Dodaj komentar || Trackback


Brez komentarjev na “AJAX iskanje in dodajanje v seznam (select) z dodatnimi informacijami”

  1. .: TRSplet - internetne storitve .: » Blog Archive » AJAX iskanje datotek, dodajanje v seznam ter predogled le teh (PDF, jpeg) je napisal:
    March 16th, 2008 ob 11:04 am

    [...] Na blogu sem že pisal o iskanju vsebine, kjer smo poiskali rezultate ter le-te dodali v seznam (z d.... Pri iskanju datotek je princip podoben. Z AJAX-om poiščemo datoteke, ki ustrezajo danim pogojem, rezultate dodamo v seznam s pomočjo Javascript-a ter jih, ko so izbrane s strani uporabnika tudi prikažemo (predogled). Predogled je možen za različne vrste datotek, v našem primeru bomo uporabili PDF, Jpeg datoteke (mimetype). [...]

Dodaj komentar