How to use autocomplete (suggestion) in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to use autocomplete (suggestion) in bootstrap with code example.

Here, we will use the .typeahead class to make use of autocomplete in bootstrap.

In this article, we will learn to implement dynamic autocomplete search using Bootstrap Typeahead. Bootstrap Typeahead is a plugin that helps to add a beautiful autocomplete option in the search bar.

In this approach, we will be taking static data for autocomplete, but we can also use dynamic JSON data as well, to show search options.

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js">
    </script>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

    <style>
        body {
            background: #3F51B5;
        }
        
        .page-title {
            color: #ffffff;
            font-weight: 800;
        }
        
        .typeahead {
            width: 50%;
        }
        
        .autocomplete {
            position: relative;
            display: inline-block;
        }
        
        .autocomplete-items {
            position: absolute;
            z-index: 99;
            top: 100%;
            left: 0;
            right: 0;
        }
    </style>
</head>

<body style="text-align: center">
    <div>
        <p class="page-title">Suggest the states of India</p>

        <input type="text" class="typeahead" data-provide="typeahead" placeholder="Enter name of states of India " />
    </div>

    <script>
        // Initializes  input( name of states)
        // with a typeahead
        var $input = $(".typeahead");
        $input.typeahead({
            source: [
                "Andhra Pradesh",
                "Arunachal Pradesh",
                "Assam",
                "Bihar",
                "Chhattisgarh",
                "Goa",
                "Gujarat",
                "Haryana",
                "Himachal Pradesh",
                "Jharkhand",
                "Karnataka",
                "Kerala",
                "Madhya Pradesh",
                "Maharashtra",
                "Manipur",
                "Meghalaya",
                "Mizoram",
                "Nagaland",
                "Odisha",
                "Punjab",
                "Rajasthan",
                "Sikkim",
                "Tamil Nadu",
                "Telangana",
                "Tripura",
                "Uttar Pradesh",
                "Uttarakhand",
                "West Bengal",
            ],
            autoSelect: true,
        });

        $input.change(function() {
            var current = $input.typeahead("getActive");
            matches = [];

            if (current) {

                // Some item from your input matches
                // with entered data
                if (current.name == $input.val()) {
                    matches.push(current.name);
                }
            }
        });
    </script>
</body>

</html>

In the above code, we have used .typeahead class to autocomplete in bootstrap

Check the output of the above code example.

Bootstrap, Use, Autocomplete

All the best 👍