How to create dynamic autocomplete search using Bootstrap Typeahead ? - GeeksforGeeks

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="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>        .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
Bootstrap-Questions
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?