Casuta de cautari cu rezultate

Salutare,

Caut de ceva timp să învăț cum să creez un search form care să-mi afișeze rezultatele căutării în timp real prin extracție din baza de date după nume produs să presupunem (similar cu box-ul de căutare de pe GSMArena.com).

Mă puteți ajuta cu ceva documentație? (luați în considerare că sunt începător.)

Mulțumesc.

teoria e simpla:

onkeyup -> request ajax cu termenul -> query db cu limit -> populata lista de rezultate cu raspunsul din ajax.

2 Likes

http://jqueryui.com/autocomplete/

Ai exemplu si pentru ajax inclusiv un php cu o cautare basic. Descarca tot pachetul si uita-te la exemplele din folder ca sa gasesti php-ul.

1 Like

Practica este un pic mai… specială:

  1. Folosești un timer la 1-200ms (nu vrei să faci un request la fiecare literă)
  • la fiecare request trebuie să ai grijă să oprești request-ul anterior
  • de preferat ar fi să faci caching la rezultate (e.g. scrii un cuvânt, dar nu vrei să mai faci o interogare când ștergi un cuvânt)
  • șamd

Varianta scurtă ar fi să folosești ceva de genul jQuery UI (dar depinde ce bibliotecă folosești)

2 Likes

O alternativa mult mai flexibila la jQuery UI Autocomplete este Typeahead, de la Twitter. Eu l-am folosit de cateva ori si mi s-a parut extraordinar. Singurul deazavantaj este ca trebuie sa te descurci singur pe partea de design (vine fara CSS), dar gasestii chestii deja facute.

3 Likes

Lucrurile sunt mult mai simple, chiar daca vrei sa faci de la 0, afica fara typeahead.

  1. E clar ca trebuie sa ai un script care iti returneaza rezultatele, fie json fie html
  2. Folosesti fie debounce fie throttle din underscore http://underscorejs.org/#debounce si rezolvi problema requesturilor multiple
  3. Ca optiune de optimizare rezultatele din backend vin in format json , iar afisarea rezultatelor sa face intr-un template js (handlebars,etc)
1 Like

lasati omul sa faca intai un script simplu care sa rezolve problema si abia apoi venici cu speciale si optimizari.

3 Likes

Mulțumesc pentru răspunsuri, o să mă apuc de citit și aplicat și cu siguranță voi reveni cu întrebări.