Hoe de widget Widget voor automatisch aanvullen van jQuery te gebruiken

We zullen ook een link moeten maken naar de bestanden die we hebben uitgepakt in het jQuery UI-archief, evenals een aangepast stylesheet; de volgende bestanden moeten in de van de pagina:

De volgende bestanden zouden aan het einde van de :

Stap 3 Het formulier stylen

We gebruiken een heel eenvoudig, neutraal thema in dit voorbeeld, waarvan de meeste louter als voorbeeld dienen. Zeer weinig van de stijlen zijn vereist en de meeste kunnen indien nodig worden gewijzigd. De volgende CSS wordt gebruikt in de autocomplete.css stylesheet (alle jQuery UI-styling bevindt zich in de jquery-ui-1.8.custom.css stylesheet):

#formWrap opvulling: 10px; positie: absoluut; float: left; background-color: # 000; achtergrond: RGBA (0,0,0, 0,5); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;  #messageForm width: 326px; rand: 1px vast # 666; background-color: #eee;  #messageForm-veldset opvulling: 0; margin: 0; position: relative; border: none; background-color: #eee;  #messageForm-legende visibility: hidden; Hoogte: 0;  #messageForm span display: block; width: 326px; opvulling: 10px 0; marge: 0 0 20px; text-indent: 20px; background-color: #bbb; border-bottom: 1px solid # 333; lettertype: 18px Georgia, Serif; color: # fff;  #friends width: 274px; opvulling: 3px 3px 0; marge: 0 auto; border: 1px solid #aaa; background-color: # fff; cursor: tekst;  #messageForm #to width: 30px; marge: 0 0 2px 0; opvulling: 0 0 3px; position: relative; top: 0; float: left; border: none;  #messageForm input, #messageForm textarea display: block; width: 274px; padding: 3px; marge: 0 auto 20px; border: 1px solid #aaa;  #messageForm-label display: block; marge: 20px 0 3px; text-indent: 22px; lettertype: vet 11px Verdana, schreefloos; color: # 666;  #messageForm #toLabel margin-top: 0;  #messageForm-knop float: right; marge: 0 0 20px 0;  #messageForm #cancel margin-right: 20px;  #friends span display: block; marge: 0 3px 3px 0; opvulling: 3px 20px 4px 8px; position: relative; float: left; background-color: #eee; rand: 1px vast # 333; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; color: # 333; lettertype: normaal 11px Verdana, Sans-serif;  #friends span a position: absolute; rechts: 8px; top: 2px; color: # 666; lettertype: vet 12px Verdana, schreefloos; text-decoration: none;  #friends span a: hover color: # ff0000;  .ui-menu .ui-menu-item white-space: nowrap; opvulling: 0 10px 0 0; 

Om de vorm een ​​mooie transparante rand met afgeronde hoeken te geven, gebruiken we de CSS3 RGBA regel en de -moz-border-radius, -webkit-border-radius en border-radius reglement; de meest populaire browsers ondersteunen nu deze regels, waaronder Firefox, Safari, Chrome en Opera. IE ondersteunt geen van beide en hoewel het een filter kan gebruiken om rudimentaire dekking te implementeren, moeten afgeronde hoeken worden ondersteund door het gebruik van afbeeldingen. De effectiviteit van de RGBA transparantie wordt in dit voorbeeld niet optimaal getoond; maar dit type formulier zou waarschijnlijk worden gebruikt als een zwevende modale overlay in een volledige implementatie, die boven de werkelijke inhoud op de pagina zou liggen.

De houder

rond de veld waaraan het tekstveld Autocomplete wordt gekoppeld, krijgt dezelfde positionering en vormgeving als de elementen, maar de in deze container is de rand verwijderd, zodat deze is verborgen. We verkleinen ook de breedte en zweven deze naar links. Dit is zo dat wanneer we de opgemaakte ontvangers toevoegen aan de

de zal niet overlopen en de hoogte van de

onnodig.

We stylen ook de ontvangers, die zullen worden toegevoegd aan de

zoals elementen met een link. Meestal zijn deze gestyled om overeen te stemmen met het basisthema en krijgen ze ook afgeronde hoeken. Het is belangrijk dat deze elementen op blokniveau worden gemaakt en ook zweven zodat ze correct worden opgestapeld. We moeten ook enkele van de Automcomplete-stijlen vervangen die worden geboden door het jQuery UI-thema dat we gebruiken; de laatste selector voorkomt simpelweg dat de afzonderlijke suggesties in het menu tussen woorden breken, wat gebeurt omdat we de het wordt geassocieerd met zo klein.

In dit stadium zou het formulier er als volgt uit moeten zien:

---

Stap 4 Toevoegen van Autocomplete

Vervolgens moeten we de widget Autocomplete aan de binnen de

; om dit te doen kunnen we het volgende script gebruiken:

De widget is gekoppeld aan de de ... gebruiken automatisch aanvullen () methode. We leveren een object letterlijk als een argument voor de methode, die het bron optie en de kiezen en verandering event callbacks.

De bron optie wordt gebruikt om de widget te vertellen waar de suggesties voor het menu Autocomplete vandaan moeten komen. We gebruiken een functie als de waarde van deze optie, die twee argumenten accepteert; de eerste is de term ingevoerd in de , de tweede is een callback-functie die wordt gebruikt om de suggesties terug te sturen naar de widget.

Binnen deze functie gebruiken we jQuery's getJSON () methode om de term door te geven aan een PHP-bestand aan de server. Het PHP-bestand gebruikt de term om overeenkomende contactnamen uit een MySQL-database te extraheren. We gebruiken een JSONP-callback om de gegevens te verwerken die van de server worden geretourneerd; de callback-functie die wordt doorgegeven als het tweede argument voor de bronoptie, verwacht de gegevens in een array te ontvangen, dus maken we eerst een lege array en gebruiken dan jQuery's elk() methode om elk item in de JSON-array geretourneerd door de server te verwerken. We herhalen eenvoudigweg elk item in deze array en voegen elke suggestie toe aan onze nieuwe array. Zodra onze nieuwe array is gebouwd, geven we deze door aan de callback-functie voor de widget die in het menu wordt weergegeven.

Vervolgens definiëren we een handler voor de custom custom van Autocomplete kiezen evenement; deze functie wordt uitgevoerd door de widget telkens wanneer een suggestie wordt geselecteerd in het menu Autocomplete. Deze functie krijgt automatisch twee argumenten doorgegeven - het gebeurtenisobject en een ui object met de suggestie die is geselecteerd. We gebruiken deze functie om de naam van de ontvanger te formatteren en toe te voegen aan de

. We maken eenvoudig een element om de tekst vast te houden en een ankerelement dat kan worden gebruikt om de ontvanger te verwijderen. Zodra de geformatteerde ontvanger is gemaakt, voegen we deze net vóór de gecamoufleerde tekst in .

Ten slotte voegen we een handler toe voor de verandering evenement; deze functie zal worden aangeroepen wanneer de waarde van de dat de Autocomplete is gekoppeld aan wijzigingen. We gebruiken het gewoon om de waarde van de te verwijderen omdat we de opgemaakte versie al aan onze container hebben toegevoegd

. De karaat ziet er een beetje hoog uit zodra een geformatteerde contactnaam is toegevoegd aan de

dus we gebruiken deze gebeurtenishandler ook om dit te corrigeren.

Dit is de configuratie die we nodig hebben voor deze specifieke implementatie, maar er zijn nog een aantal extra functies die we moeten toevoegen om de zaken een beetje op te ruimen. Na de automatisch aanvullen () methode voeg de volgende code toe:

// klik-handler toevoegen aan vrienden div $ ("# vrienden"). klik (functie () // focus 'naar' veld $ ("# to"). focus ();); // live-handler toevoegen voor klikken op koppelingen verwijderen $ (". remove", document.getElementById ("vrienden")). live ("klik", functie () // huidige vriend verwijderen $ (this) .parent () .remove (); // juiste 'tot' veldpositie als ($ ("# vrienden span"). length === 0) $ ("# to"). css ("top", 0); );

De waaraan onze Autocomplete is gekoppeld, is gedeeltelijk verborgen en de bijbehorende container

is zo gestileerd dat het lijkt op de andere velden op het formulier; om het bedrog te voltooien, voegen we een klikhandler toe aan de container

zodat het klikken op een willekeurige plaats binnenin de werkelijkheid focust . Visueel en functioneel nu het

moet niet te onderscheiden zijn van een gewoon veld.

We moeten ook klikken verwerken op het anker dat aan elke opgemaakte ontvanger is toegevoegd; we gebruiken jQuery's leven() methode omdat deze elementen op een gegeven moment al dan niet op de pagina kunnen voorkomen en het eenvoudiger is om de handlerfunctie te binden telkens wanneer we een van deze ankers maken. Wanneer op een van deze ankers wordt geklikt, navigeren we alleen naar het bovenliggende item van het anker waarop is geklikt en vervolgens van de pagina verwijderen. Weet je nog toen we de positie van de karaat eerder in het script verbeterden? We hoeven alleen maar te controleren of alle ontvangers zijn verwijderd en, als dat het geval is, de positie terug te zetten naar de standaardwaarde.

---

Stap 5 Aanvullende code en bronnen

Ik gebruikte een MySql-database met een tabel met alle ontvangernamen en het volgende PHP-bestand om de gegevens te accepteren die door de getJSON () methode en haal overeenkomende ontvangers uit de database:

 $ Row [ "naam"]);  // echo JSON om pagina $ response = $ _GET ["callback"]. "(". json_encode ($ friends). ")"; echo $ antwoord; mysql_close ($ server); ?>

Om de downloadbare voorbeeldbestanden uit te voeren, hebt u een ontwikkelingswebserver nodig met PHP geïnstalleerd en geconfigureerd, evenals MySql en de juiste database en tabel. Wanneer een letter wordt getypt in het veld 'Aan', wordt deze brief doorgegeven aan de server en gebruikt om elke naam te verwijderen die begint met de letter die is getypt. De overeenkomende namen worden vervolgens als JSON doorgegeven aan de pagina en weergegeven in het suggestiemenu:

Deze zelfstudie liet zien hoe het berichtverzendingsformulier van Facebook kan worden gerepliceerd, met name de manier waarop vrienden worden toegevoegd aan het berichtenformulier als ontvangers met een automatisch aanvullen en hoe de vriendennamen worden opgemaakt zodra ze zijn toegevoegd, zodat ze gemakkelijk kunnen worden verwijderd. Ons voorbeeldformulier doet eigenlijk niets, maar wat we zouden moeten doen om het formulier daadwerkelijk te verzenden, zou zijn om de inhoud van het formulier door te geven aan een server-side-bestand voor verzending met behulp van AJAX, die gemakkelijk kan worden toegevoegd aan de submit gebeurtenis van de verzendknop die op het formulier is gebruikt.

De ontvangers moeten natuurlijk een bepaalde betekenis hebben voor het back-endsysteem en zouden waarschijnlijk worden toegewezen aan e-mailadressen in de database. We zouden de tekstuele inhoud van elk van de elementen voordat ze teruggaan naar de server, hoewel dit een vrij triviale zaak zou zijn.

De jQuery UI Autocomplete-widget maakt het eenvoudig om verbinding te maken met elke gegevensbron en bevat een uitgebreide reeks gebeurtenishandlers waaraan we functies kunnen leveren om te reageren op tekst die wordt ingevoerd in het bijbehorende veld of een suggestie die wordt geselecteerd in het menu. De widget is gestileerd met behulp van het uitgebreide CSS-framework van jQuery UI en kan eenvoudig worden gewijzigd zodat het overeenkomt met uw bestaande sitethema. Al met al is het een uitstekende widget die gemakkelijk te gebruiken is en geweldige functionaliteit biedt.

Code

De nieuwste updates van de Marketplace-API gebruiken

Hoe de jQuery-functie te gebruiken om elementen te selecteren

×