Autoslutför med jQuery UI

Det finns många plugins på internet som gör att vi kan lägga till denna funktionalitet på vår webbplats, men de är utvecklade under ett programmeringsschema som vi kanske inte känner till och då är deras modifiering och implementering vanligtvis lite tråkig och komplicerad. Men allt är inte förlorat sedan dess jQuery och dess utökning av bibliotek jQuery UI de ger oss några metoder för att implementera autofullständig funktionalitet på vår webbplats utan mycket huvudvärk.
Innan vi går igenom ett exempel låt oss se metoden för autoslutförande och hur det fungerar.
Autofullständig () -metoden
Metoden autoslutförande kan användas på två sätt:

$ (väljare, sammanhang) .autocomplete (alternativ) $ (väljare, sammanhang) .autocomplete ("åtgärd", params)

Denna metod förklarar att en HTML måste hanteras som ett fält som visar en lista med förslag, alternativen anger beteendet för denna lista i det ögonblick som användaren börjar skriva i fältet.
Av de tecken som anges i textfältet görs en jämförelse med värdena i källalternativen.
Låt oss se ett praktiskt exempel för att se det bättre:
1- Först inkluderar vi nödvändiga filer:

2- Vi skapar en variabel som innehåller orden som kommer att vara listan över förslag som är tillgängliga för autoslutförande, listan över förslag kan också matas från en JSON och även från en XML, till och med utöka funktionaliteten lite genom att lägga till ajax, men i det här exemplet kommer vi att använda en variabel för att inte komplicera saker:

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

3- Vi åberopar metoden, associerar väljaren med den och ger den parametern som ett alternativ källa Berätta var du kan få listan över förslag från:

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

4- För att avsluta i vår HTML skapar vi ensom kommer att innehålla vår input som är den som implementerar autoslutförandet:

Taggar:

Efter implementeringen ska det vara ungefär så här:

Slutligen lämnar jag hela koden så att du kan testa den själv, utan att glömma att vi kan fylla i vår lista med förslag från olika giltiga källor och tillämpa olika alternativ och händelser som kommer att öka funktionen hos vår komponent.

 jQuery UI Autoslutförande - StandardfunktionTaggar:

Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng