Automatisch aanvullen met jQuery UI

Er zijn veel plug-ins op internet waarmee we deze functionaliteit aan onze site kunnen toevoegen, maar ze zijn ontwikkeld onder een programmeerschema dat we misschien niet kennen en dan is hun wijziging en implementatie meestal enigszins vervelend en gecompliceerd. Maar niet alles is verloren sinds jQuery en de uitbreiding van bibliotheken jQuery-gebruikersinterface ze brengen ons enkele methoden om de autocomplete-functionaliteit op onze site zonder veel hoofdpijn te implementeren.
Laten we, voordat we een voorbeeld doornemen, eens kijken naar de methode voor automatisch aanvullen en hoe deze werkt.
De methode voor automatisch aanvullen ()
De methode automatisch aanvullen kan op twee manieren worden gebruikt:

$ (selector, context) .autocomplete (opties) $ (selector, context) .autocomplete ("actie", parameters)

Deze methode verklaart dat een HTML moet worden beheerd als een veld dat een lijst met suggesties weergeeft, de opties specificeren het gedrag van deze lijst op het moment dat de gebruiker in het veld begint te typen.
Van de tekens die in het tekstveld worden ingevoerd, wordt een vergelijking gemaakt met de waarden die in de bronopties staan.
Laten we een praktisch voorbeeld bekijken om het beter te zien:
1- Eerst voegen we de benodigde bestanden toe:

2- We maken een variabele die de woorden bevat die de lijst met suggesties zullen zijn die beschikbaar zijn voor automatische aanvulling, de lijst met suggesties kan ook worden ingevoerd vanuit een JSON en zelfs van een XML, zelfs de functionaliteit een beetje uitbreiden door ajax toe te voegen, maar in dit voorbeeld zullen we een variabele gebruiken om de zaken niet ingewikkelder te maken:

var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C ++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy "," Haskell "," Java "," Javascript "," Lisp "," Perl "," PHP "," Python "," Ruby "," Scala "," Schema "];

3- We roepen de methode aan, associëren de selector ermee en geven het de parameter als een optie bron U vertellen waar u de lijst met suggesties vandaan kunt halen:

 $ ("#tags") .autocomplete ({bron: availableTags}); 

4- Om te eindigen in onze HTML maken we eendie onze invoer zal bevatten die degene zal zijn die de autocomplete implementeert:

Trefwoorden:

Na de implementatie zou het ongeveer zo moeten zijn:

Ten slotte ga ik u de volledige code achterlaten, zodat u deze zelf kunt testen, zonder te vergeten dat we onze lijst met suggesties uit verschillende geldige bronnen kunnen vullen en verschillende opties en gebeurtenissen kunnen toepassen die de functionaliteit van onze component zullen vergroten.

 jQuery UI Autocomplete - StandaardfunctionaliteitTrefwoorden:

Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven