Share
Het live-zoekeffect is geen nieuwigheid in desktop-apps. In Mac OS X of Windows Vista / 7 typt u een paar letters in een zoekvak, bijna onmiddellijk krijgt u het zoekresultaat meteen. Het klikken op de knop Verzenden is oud worden.
Deze tutorial laat je zien hoe je dit coole effect naar de webwereld brengt met jQuery. De code die in deze zelfstudie wordt gebruikt, is aangepast op basis van John Resig's Approach.
Livesearch-effect in Windows 7
Livesearch-effect in OS X
Om te beginnen, hebben we een paar HTML-elementen nodig, waaronder:
... en twee javascript-bibliotheken:
Last but not least hebben we een aantal items nodig om uit te zoeken. Laten we in deze zelfstudie de namen van veel webframeworks gebruiken als dummygegevens, OK? (Zie de lijst van deze kaders)
De "search-from" -gegevens kunnen worden verstrekt in arrays, JSON's of in welke vorm dan ook, zolang ze maar kunnen worden doorgelust in javascript. Multidimensionale arrays kunnen ook worden gebruikt. Maar voor het gemak van demonstratie en begrip, zijn de gegevens die in deze tutorial worden gebruikt een eenvoudige eendimensionale array die "items" wordt genoemd.
En tot slot, hier is de HTML. Besteed aandacht aan waar de twee JS-bibliotheken worden opgenomen. Opmerking: CSS is niet het belangrijkste onderdeel van dit effect, dus we zullen geen seconde besteden aan styling. Ze zijn verkleind. Ik hoop dat dit je niet zal storen of afleiden. Laten we ons concentreren op HTML en JS.
Sla de volgende code op in een html-bestand en laten we beginnen!
jQuery Livesearch-effect jQuery Livesearch Demo
Vind uw favoriete webraamwerk
<-- Type in here and get search results LIVE!
Als javascript-man kun je vandaag niet leven zonder Firebug. Het is absoluut een must voor iedereen die met jQuery werkt. Je kunt deze tutorial voltooien zonder dat firebug is geïnstalleerd. Maar met firebug kunnen we veel achter-de-scène dingen zien, wat essentieel is om het zoeken in dit effect te begrijpen.
Weet je nog de dummy items om uit te zoeken? Ja, de framenamen. Laten we controleren of ze op de juiste plaats zijn met Firebug:
Je zou iets moeten zien in de afbeelding hieronder. Firebug print de "items" -variabele die een array is. Ja, onze framenamen zijn daar precies op hun plaats. Laten we verder gaan!
Laten we het nu hebben over de logica. Om dit effect te laten werken, moet een reeks dingen gebeuren:
Makkelijk, hah? Behalve voor een ding. Als ik naar een kader met de naam "cake" zoek, wordt de bovenstaande logica uitgevoerd, één cyclus per letter, in totaal 4 cycli, toch? Maar de eerste 3 cycli zijn volledig overbodig, alleen om de prestaties op een grote manier te verminderen. Om dit te voorkomen, wachten we tot de gebruiker stopt met het intoetsen voordat onze logica wordt geactiveerd. En als een gebruiker stopt met het intoetsen van 0,2 seconden, nemen we aan dat hij klaar is. Tot op dit punt is onze logica delicaat genoeg. Het is tijd om je handen vuil te maken en te beginnen met coderen!
In het echte leven kan luisteren uiterst belangrijk zijn. Dit geldt ook in de wereld van jQuery, waar alles begint met het luisteren naar een evenement.
Zoek naar "placeholder" in het HTML-bestand. Zet de volgende code op die plaats.
De volgende code luistert naar de key-upgebeurtenis. Gooi ze tussen dee
Accentsconagua