JavaScript Auto Complete/Suggestion feature

0 0 2 minutes read

In this article, we will make a Javascript auto-complete/ suggestion feature. There are many ways to make an autocomplete feature in JavaScript. We will be targeting two of them. One uses Vanilla JavaScript and the other by using a framework like jQuery.

Prerequisites:

Using Vanilla JavaScript (No frameworks): This method shows the results faster than the method of using frameworks.

Important functions:

getElementsByTagName() Method: It is used to get elements by their tag name in HTML.
createElement(“type”) Method: It is used to create an element of the given type.
appendChild(node) Method: It appends the passed node at the end of the attached parent.

Example 1: In this example, we will use plain JavaScript to make suggestions.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Auto complete using Pure Javascript
    </title>
</head>
 
<body>
    <!-- Onkeyup calls the function everytime 
        a key is released -->
    <input type="text" list="datalist"
        onkeyup="ac(this.value)">
 
    <!-- This data list will be edited 
        through javascript -->
    <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="Kerala"></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>
    </datalist>
 
    <script type="text/javascript">
        let tags = [
            "Delhi",
            "Ahmedabad",
            "Punjab",
            "Uttar Pradesh",
            "Himachal Pradesh",
            "Karnataka",
            "Kerala",
            "Maharashtra",
            "Gujrat",
            "Rajasthan",
            "Bihar",
            "Tamil Nadu",
            "Haryana"
        ];
 
        /* list of available options */
        let n = tags.length; // length of datalist tags
 
        function ac(value) {
 
            // Setting datalist empty at the start 
            // of function. If we skip this step, 
            // same name will be repeated
            document.getElementById('datalist').innerHTML = '';
             
            // Input query length
            l = value.length;
             
            for (let i = 0; i < n; i++) {
 
                // Comparing if input string is existing
                // in tags[i] string
                if (((tags[i].toLowerCase()).indexOf(
                value.toLowerCase())) > -1) {
                    let node = document.createElement("option");
                    let val = document.createTextNode(tags[i]);
                    node.appendChild(val);
 
                    // Creating and appending new elements
                    // in data list
                    document.getElementById("datalist")
                        .appendChild(node);
                }
            }
        }
    </script>
</body>
</html>

Output:

Using jQuery: jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It has an inbuilt autocomplete function that takes an id and a list of available tags.

Example 2: In this example, we will use jQuery to make suggestions.

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 () {
 
            /* Making a list of available tags */
            let tags = [
                "Delhi",
                "Ahmedabad",
                "Punjab",
                "Uttar Pradesh",
                "Himachal Pradesh",
                "Karnataka",
                "Kerala",
                "Maharashtra",
                "Gujrat",
                "Rajasthan",
                "Bihar",
                "Tamil Nadu",
                "Haryana"
            ];
 
            /* #the tags is the id of the input 
            element source: tags is the list of 
            available tags*/
            $("#tags").autocomplete({
                source: tags
            });
        });
    </script>
</head>
 
<body>
    <div class="ui-widget">
        <input id="tags">
    </div>
</body>
</html>