In this article, we will make a Javascript auto-complete/ suggestion feature. There are many ways to make an autocomplete feature in JavaScript. We will be targeting two of them. One uses Vanilla JavaScript and the other by using a framework like jQuery.
Prerequisites:
Using Vanilla JavaScript (No frameworks): This method shows the results faster than the method of using frameworks.
Important functions:
- getElementsByTagName() Method: It is used to get elements by their tag name in HTML.
- createElement(“type”) Method: It is used to create an element of the given type.
- appendChild(node) Method: It appends the passed node at the end of the attached parent.
Example 1: In this example, we will use plain JavaScript to make suggestions.
HTML
<!DOCTYPE html><html><head> <title> Auto complete using Pure Javascript </title></head><body> <!-- Onkeyup calls the function everytime a key is released --> <input type="text" list="datalist" onkeyup="ac(this.value)"> <!-- This data list will be edited through javascript --> <datalist id="datalist"> <option value="Delhi"></option> <option value="Ahemdabad"></option> <option value="Punjab"></option> <option value="Uttar Pradesh"></option> <option value="Himachal Pradesh"></option> <option value="Karnataka"></option> <option value="Kerala"></option> <option value="Maharashtra"></option> <option value="Gujrat"></option> <option value="Rajasthan"></option> <option value="Bihar"></option> <option value="Tamil Nadu"></option> <option value="Haryana"></option> </datalist> <script type="text/javascript"> let tags = [ "Delhi", "Ahmedabad", "Punjab", "Uttar Pradesh", "Himachal Pradesh", "Karnataka", "Kerala", "Maharashtra", "Gujrat", "Rajasthan", "Bihar", "Tamil Nadu", "Haryana" ]; /* list of available options */ let n = tags.length; // length of datalist tags function ac(value) { // Setting datalist empty at the start // of function. If we skip this step, // same name will be repeated document.getElementById('datalist').innerHTML = ''; // Input query length l = value.length; for (let i = 0; i < n; i++) { // Comparing if input string is existing // in tags[i] string if (((tags[i].toLowerCase()).indexOf( value.toLowerCase())) > -1) { let node = document.createElement("option"); let val = document.createTextNode(tags[i]); node.appendChild(val); // Creating and appending new elements // in data list document.getElementById("datalist") .appendChild(node); } } } </script></body></html> |
Output:
Using jQuery: jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It has an inbuilt autocomplete function that takes an id and a list of available tags.
Example 2: In this example, we will use jQuery to make suggestions.
HTML
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <title>Autocomplete using jQuery</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src= </script> <script src= </script> <script> $(function () { /* Making a list of available tags */ let tags = [ "Delhi", "Ahmedabad", "Punjab", "Uttar Pradesh", "Himachal Pradesh", "Karnataka", "Kerala", "Maharashtra", "Gujrat", "Rajasthan", "Bihar", "Tamil Nadu", "Haryana" ]; /* #the tags is the id of the input element source: tags is the list of available tags*/ $("#tags").autocomplete({ source: tags }); }); </script></head><body> <div class="ui-widget"> <input id="tags"> </div></body></html> |
Output:
