Skip to content
Related Articles

Related Articles

JavaScript | Auto Complete / Suggestion feature

View Discussion
Improve Article
Save Article
  • Last Updated : 15 Jun, 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: 

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",
    "Ahmedabad",
    "Punjab",
    "Uttar Pradesh",
    "Himachal Pradesh",
    "Karnataka",
    "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="Karnataka"></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>
  $( function() {
    var tags = [
    "Delhi",
    "Ahmedabad",
    "Punjab",
    "Uttar Pradesh",
    "Himachal Pradesh",
    "Karnataka",
    "Kerela",
    "Maharashtra",
    "Gujrat",
    "Rajasthan",
    "Bihar",
    "Tamil Nadu",
    "Haryana"
 
 
      /* Making a list of available tags */
 
 
    ];
    $( "#tags" ).autocomplete({
      source: tags
 
/* #the tags is the id of the input element
source: 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/
 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!