JavaScript | Auto Complete / Suggestion feature

There are many ways to make an autocomplete feature in javascript. We will be targetting 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    Output:
    
At first output will be like below-
    
Image
    
And when B is put inside of the box then output becomes like below-
    
Image
    
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:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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 
    

      
    

    /* #tthe ags 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> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Type a letter to see recommendations and click to complete the text automatically.
    
Output:
    
At first, output will be like below-
    
Image
    
And when D is put inside of the box then output becomes like below-
    
Image
    
Reference: http://api.jqueryui.com/autocomplete/
    

    
          
          
          
          
    
            
    
    
    
        My Personal Notes
        arrow_drop_up
    
    
    
    
        
        
    
            
            
        
    
    
    

    Recommended Posts:
    Image
    Qubot
    Check out this Author's contributed articles.
    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
    Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.

    
      
      
      
      
    
      
    
      
					
		
    
    Article Tags : 
    JavaScript
    JQuery
    
           	
            
    
         
    
         
     
         
        Be the First to upvote.
    
                
    
        


    
        
        
        
        
        
    
    
    
            
    
            0
            
    
            
    
                             No votes yet.
                    
    
            
            
            
            
            
        
    
        
        
    
        
    
        
    
        
    
        
    
        
    
        
    

    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.