Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to create dynamic autocomplete search using Bootstrap Typeahead ?

  • Last Updated : 14 Jul, 2021

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :