Open In App

How to create dynamic autocomplete search using Bootstrap Typeahead ?

Improve
Improve
Like Article
Like
Save
Share
Report

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. The methods used in the Typeahead plugin are as follows.

  • .typeahead(options): Initializes an input with a typeahead.
  • .lookup: To trigger the lookup function externally.
  • .getActive: To get the currently active item, you will get a string or a JSON object depending on how you initialized typeahead. It works only for the first match.

Example: The following example demonstrates the dynamic autocomplete search using Bootstrap Typehead.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <script src=
    </script>
      
    <script src=
    </script>
      
    <link href=
        rel="stylesheet" />
  
    <style>
        .typeahead {
            width: 50%;
            top: 60px !important;
            left: 50px !important;
        }
    </style>
</head>
  
<body style="text-align: center">
    <div>
        <b><p>Suggest the states of India</p></b>
  
        <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>


Output:

dynamix automatic typeahead



Last Updated : 14 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads