How to set auto-suggest on search as drop-down in the official Bootstrap site ?

Last Updated : 11 Apr, 2023

The Drop-Down menu is located in the top navigation bar. When clicked, the menu expands to reveal several options for navigating the site. The menu is designed with a clean, minimalist aesthetic that is consistent with Bootstrap’s overall design philosophy. You can configure the auto-suggest as a search dropdown on the official Bootstrap site using the built-in Bootstrap Typeahead plugin.

Steps to configure the auto-suggest on search as a drop-down:

Add the necessary Bootstrap files and the Typeahead plugin to your HTML. You can download files and link locally or use CDN links. Here is an example:

<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>

<!– Bootstrap JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

<!– Typeahead plugin –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js”></script>

Create an input field with a type property and a data source. The data source can be an array of strings or an object with key-value pairs. For example:

<input type="text" 
       class="GeeksforGeeks-form-control" 
       id="GeeksforGeeks" 
       placeholder="Search" 
       autocomplete="off" 
       data-provide="typeahead" 
       data-source='["GeeksforGeeks", "Geeks", 
                        "Geeksforfun", "WelcomeGeeks"]'>

Start the Typeahead plugin with JavaScript code. You can use the typeahead() method on the input field and pass any settings you want to customize. For example:

$(document).ready(function(){
  $('#myInput').typeahead({
    minLength: 2, // Minimum characters to trigger suggestions
    highlight: true, // Highlight matching text in suggestions
    hint: true, // Show a hint based on the user's input
    limit: 5 // Maximum number of suggestions to display
  });
});

With these steps, you should now have a search input field with auto-suggest as a drop-down menu on the official Bootstrap site.

Example 1: This example illustrates the setting up of an auto-suggest dropdown search bar using Bootstrap’s Typeahead plugin. When you load this HTML page in your web browser, you should see a search bar with a dropdown of auto-suggest options based on the searchSuggestions array defined in the script section. You can modify this array to provide your own set of search suggestions.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        GeeksforGeeks Auto-Suggest Dropdown Search Bar 
    </title> 
    <link rel="stylesheet" 
          href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h3 class="text-success"> 
            Auto-Suggest Dropdown Search Bar 
        </h3> 
        <form> 
            <div class="form-group"> 
                <label for="search"> 
                      Search: 
                  </label> 
                <input type="text" 
                       class="form-control typeahead" 
                       id="search" 
                       placeholder="Search"> 
            </div> 
        </form> 
    </div> 
  
    <script> 
        
        // Define an array of search suggestions 
        var searchSuggestions = ['GeeksforGeeks', 'Geeks',  
                                 'Geeksforfun', 'WelcomeGeeks']; 
  
        // Initialize the Typeahead plugin on the search input field 
        $('#search').typeahead({ 
            source: searchSuggestions 
        }); 
    </script> 
</body> 
    
</html>

Output:

Example 2: Here’s another example of HTML code for setting up an auto-suggest search with a dropdown using Bootstrap. This code sets up an auto-suggest search form with a dropdown menu that displays suggestions based on the user’s input. The suggestions are taken from the data array, which is passed to the source option of the autocomplete() method. When you type in the search field, the suggestions should appear in a dropdown menu below the input field.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>  
        Bootstrap Auto-Suggest Search with Dropdown 
    </title> 
    <link rel="stylesheet" 
          href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src= 
"https://code.jquery.com/jquery-1.12.4.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/ui/1.12.1/jquery-ui.js"> 
    </script> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Bootstrap Auto-Suggest Search with Dropdown 
        </h3> 
    </div> 
    <div> 
        <form class="form-inline"> 
            <div class="form-group"> 
                <input type="text" 
                       class="form-control" 
                       id="search" 
                       placeholder="Search"> 
            </div> 
        </form> 
    </div> 
    <script> 
        $(document).ready(function () { 
            var data =   
            ['GeeksforGeeks', 'Geeks School',  
             'Geeksforfun', 'Geeks Premier League']; 
            $('#search').autocomplete({ source: data }); 
        }); 
    </script> 
</body> 
  
</html>