Thursday, September 4, 2025
HomeLanguagesJavascriptJavaScript Auto Complete/Suggestion feature

JavaScript Auto Complete/Suggestion feature

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: 

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=
    </script>
    <script src=
    </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>


Output: 

 

RELATED ARTICLES

Most Popular

Dominic
32260 POSTS0 COMMENTS
Milvus
81 POSTS0 COMMENTS
Nango Kala
6626 POSTS0 COMMENTS
Nicole Veronica
11795 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11855 POSTS0 COMMENTS
Shaida Kate Naidoo
6747 POSTS0 COMMENTS
Ted Musemwa
7023 POSTS0 COMMENTS
Thapelo Manthata
6695 POSTS0 COMMENTS
Umr Jansen
6714 POSTS0 COMMENTS