Live søk effekten er ingen nyhet i desktop apps. I Mac OS X eller Windows Vista / 7 skriver du bare noen få bokstaver i en søkeboks, nesten umiddelbart får du søkeresultatet i fly. Å måtte trykke på send-knappen blir gammel skole.

Denne opplæringen vil vise deg hvordan du kan bringe denne kule effekten til webverdenen med jQuery. Koden som brukes i denne opplæringen, er endret basert på John Resigs tilnærming.

Livesearch Effect i Windows 7

Livesearch Effect i OS X

---

Egenskaper

• Presenterer søkeresultat på fly
• Fuzzy Search
• Super rask, ingen AJAX-samtaler

---

Trinn 1: HTML

For å komme i gang trenger vi noen html-elementer, inkludert:

• En tekstinngang, der vi skriver inn våre spørsmål.
• En uordnet liste, for å vise søkeresultatet

... og to javascriptbiblioteker:

• jQuery: Du må minst vite dette for å fullføre denne opplæringen.
• Quicksilver Score: Dette fantastiske skriptet etterligner den berømte Quicksilver livsforskningsalgoritmen på Mac. Det forteller om to tekststrenger er relevante, og hvor relevant. Det er som en mini google i en js-fil. Brukere alle liker fuzzy søk, ikke sant? Og alle som søkeresultatene dukker opp, er de mest relevante til det minste. Takket være Lachie Cox fantastiske arbeid!

Sist men ikke minst, vi trenger noen ting å søke fra. I denne opplæringen, la oss bruke navnene på mange webrammer som dummy data, OK? (Se listen over disse rammene)

"Søk-fra" -dataene kan gis i arrays, JSONs eller noen form, så lenge de kan sløyfes i javascript. Multidimensjonale arrayer kan også brukes. Men for enkel demonstrasjon og forståelse, er data som brukes i denne opplæringen en enkel en-dimensjonal gruppe kalt "elementer".

Og til slutt, her er HTML. Vær oppmerksom på hvor de to JS-bibliotekene kommer med. Merk: css er ikke nøkkelen til denne effekten, så vi vil ikke bruke noen andre på styling. De er minifisert. Håper dette ikke vil forstyrre eller distrahere deg. La oss fokusere på HTML og JS.

Lagre følgende kode i en html-fil, og la oss starte!

         
 
jQuery Livesearch Demo
 
Finn ditt favoritt webramme
  <-- Type in here and get search results LIVE! 
 
      

---

Trinn 2: Firebug er vår beste venn!

Som javascript-fyr, kan du ikke leve uten Firebug i dag. Det er definitivt et must for alle som jobber med jQuery. Du kan fullføre denne opplæringen uten å installere firebug. Men med firebug kan vi se mange ting bakom scenen, noe som er viktig for å forstå søket i denne effekten.

Husk dummy-elementene for å søke fra? Ja, rammenavnene. La oss sjekke om de er på riktig sted med Firebug:

1. Åpne HTML-filen med Firefox.
2. Åpne Firebug, og bytt til "Console" panelet (ctrl + shift + c).
3. Skriv "elementer" (uten anførselstegn) i boksen til høyre, og trykk "Kjør".

Du bør se noe som vises i bildet nedenfor. Firebug skriver ut variabelen "elementer" som er en matrise. Ja, våre rammenavn er akkurat der på plass. La oss gå videre!

---

Trinn 3: Logikken

La oss nå snakke om logikken. For å få denne effekten til å virke, må en rekke ting oppstå:

1. Bruker treffer en nøkkel.
2. Vi får teksten i søkeboksen. La oss kalle dette "spørringen".
3. Til hvert rammeavn kontrollerer vi om spørringen er relevant, og hvor relevant det er.
4. Vi filtrerer ut relevante rammeavn og sorterer dem basert på relevans.
5. Vi presenterer resultatet til brukeren.

Lett, hah? Bortsett fra en ting. Hvis jeg søker etter et rammeverk kalt "kake", kjører logikken ovenfor, en syklus per brev, totalt 4 sykluser, ikke sant? Men de første 3 syklusene er helt unødvendige, bare for å redusere ytelsen på en stor måte. For å redusere dette, vil vi vente til brukeren slutter å taste inn før logikken slås av. Og hvis en bruker slutter å taste inn i 0,2 sekunder, antar vi at han er ferdig. Til dette punktet er vår logikk delikat nok. Det er på tide å få hendene skitne og starte kodingen!

---

Trinn 4: Hendelseslytte

I virkeligheten kan lytting være ekstremt viktig. Dette gjelder også i jQuery's verden, hvor alt starter fra å lytte til en hendelse.

Søk etter "plassholder" i HTML-filen. Sett følgende kode inn på det stedet.

Følgende kode lytter til nøkkelfunksjonen. Kast dem i mellome