Tutorialspoint.dev

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:

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

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

    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/



    This article is attributed to GeeksforGeeks.org

    leave a comment

    code

    0 Comments

    load comments

    Subscribe to Our Newsletter