Automatisch aanvullen kan worden geïmplementeerd in een JavaScript-applicatie door gebruik te maken van verschillende methoden, zoals het gebruik van JQuery UI’s Autocomplete widget of het creëren van een aangepaste oplossing.
Hier is een eenvoudig voorbeeld van hoe u jQuery UI Autocomplete kunt implementeren:
1. Voeg eerst de links naar de jQuery en jQuery UI bibliotheken toe in de head-tag van je HTML-bestand.
```
```
1. Voeg een invoer-textelement toe aan uw HTML waar u de automatische aanvulling wilt laten plaatsvinden.
```
```
1. Schrijf dan een JavaScript-functie die de automatische aanvulling initialiseert voor het tekstveld.
```
var availableTags = [
“ActionScript”,
“AppleScript”,
“Asp”,
“BASIC”,
“C”,
“C++”,
“Clojure”,
“COBOL”,
“ColdFusion”,
“Erlang”,
“Fortran”,
“Groovy”,
“Haskell”,
“Java”,
“JavaScript”,
“Lisp”,
“Perl”,
“PHP”,
“Python”,
“Ruby”,
“Scala”,
“Scheme“
];
$( “#autocomplete” ).autocomplete({
source: availableTags
});
```
In dit voorbeeld zal het invoerveld beginnen met het voorstellen van namen van programmeertalen wanneer gebruikers beginnen met typen.
Voor een pure JavaScript-gebaseerde aanpak, of voor complexere implementaties zoals aangepaste zoekalgoritmen, remote datasources of geavanceerde UI, kan je misschien overwegen om een JavaScript-bibliotheek te gebruiken die gespecialiseerd is in autocomplete functionaliteit. Populaire keuzes zijn onder andere “Typeahead.js” en “autocomplete.js” van Algolia.
