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

    
    

    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:

    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>
      $( 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

    
    

    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

    Developer in day, Designer at night GSoC 2019 with Python Software Foundation (EOS Design system)

    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 :

    Be the First to upvote.


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