JavaScript | Auto Complete / Suggestion feature - GeeksforGeeks

07 Feb, 2022
There are many ways to make an autocomplete feature in javascript. We will be targeting two of them. One using Pure Javascript and other by using Framework like Jquery. Prerequisites: 
Html
Javascript
JQuery Basics
1) Using Pure Javascript (No frameworks): This method shows the results faster than the method of using frameworks.Important functions: getElementsByTagName: Used to get elements by their class or id from html. createElement(“type”): create element creates an element of the passed type appendChild(node): Appends the passed node at the end of attached parent. Code #1:  
HTML
<!DOCTYPE html><html><head>    <title>Auto complete using Pure Javascript</title></head><body><script type="text/javascript">    var tags = [    "Delhi",    "Ahemdabad",    "Punjab",    "Uttar Pradesh",    "Himachal Pradesh",    "Karnatka",    "Kerela",    "Maharashtra",    "Gujrat",    "Rajasthan",    "Bihar",    "Tamil Nadu",    "Haryana"      ];       /*list of available options*/     var n= tags.length; //length of datalist tags         function ac(value) {        document.getElementById('datalist').innerHTML = '';         //setting datalist empty at the start of function         //if we skip this step, same name will be repeated                   l=value.length;         //input query length     for (var i = 0; i<n; i++) {         if(((tags[i].toLowerCase()).indexOf(value.toLowerCase()))>-1)         {             //comparing if input string is existing in tags[i] string              var node = document.createElement("option");             var val = document.createTextNode(tags[i]);              node.appendChild(val);                document.getElementById("datalist").appendChild(node);                   //creating and appending new elements in data list             }         }     }  </script> <input type="text" list="datalist" onkeyup="ac(this.value)"><!-- On keyup calls the function everytime a key is released --><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="Karnatka"></option><option value="Kerela"></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> <!-- This data list will be edited through javascript     --></datalist></body></html>
Output: At first output will be like below-  
And when B is put inside of the box then output becomes like below-  
2) USING JQUERY jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. JQuery has an inbuilt autocomplete function which takes id and a list of available tags. Code #2:  
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="https://code.jquery.com/jquery-1.12.4.js"></script>  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  <script>  $( function() {    var tags = [    "Delhi",    "Ahemdabad",    "Punjab",    "Uttar Pradesh",    "Himachal Pradesh",    "Karnatka",    "Kerela",    "Maharashtra",    "Gujrat",    "Rajasthan",    "Bihar",    "Tamil Nadu",    "Haryana"        /* Making a list of available tags */      ];    $( "#tags" ).autocomplete({      source: tags /* #the ags is the id of the input elementsource: tags is the list of available tags*/      });  } );  </script></head><body>  <div class="ui-widget"> <H3>Enter an alphabet to get suggestion:</H3>  <input id="tags"></div>  </body></html>
Type a letter to see recommendations and click to complete the text automatically. Output: At first, output will be like below-  
And when D is put inside of the box then output becomes like below-  
Reference: http://api.jqueryui.com/autocomplete/ 
avtarkumar719
varshagumber28
JavaScript-Misc
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?