Search

Bootstrap 5 Search component

The search box is an UI element prepared for creating search engines. Its most important element is search input, but it can also contain icons or buttons. It is also adjusted to be used in various other components such as navbar, dropdown, table, select, sidenav and many more.

Basic example

A basic example with a simple button.

Edit in sandbox 
        
            
      <div class="input-group">
        <div class="form-outline">
          <input type="search" id="form1" class="form-control" />
          <label class="form-label" for="form1">Search</label>
        </div>
        <button type="button" class="btn btn-primary">
          <i class="fas fa-search"></i>
        </button>
      </div>

Variations

Search comes with plenty of variations. Choose from the following as needed:

  • Search with icon
  • Search with button
  • Search without additional elements

Search with icon

See all the available icons in the Icons Docs.

Edit in sandbox 
        
            
          <div class="input-group rounded">
            <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
            <span class="input-group-text border-0" id="search-addon">
              <i class="fas fa-search"></i>
            </span>
          </div>

Search with button

See all the possible input combinations in the Input Group Docs.

Edit in sandbox 
        
            
          <div class="input-group">
            <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
            <button type="button" class="btn btn-outline-primary">search</button>
          </div>

Search without additional elements

Here is an example of how you can make a search component without any element attached:

Edit in sandbox 
        
            
          <div class="form-outline">
            <input type="search" id="form1" class="form-control" placeholder="Type query" aria-label="Search" />
          </div>

Search event

Here is example how you can make search component with event on it which will fire after clicking on search button.

Edit in sandbox 
        
            
        <div class="input-group">
          <div class="form-outline">
            <input id="search-input" type="search" id="form1" class="form-control" />
            <label class="form-label" for="form1">Search</label>
          </div>
          <button id="search-button" type="button" class="btn btn-primary">
            <i class="fas fa-search"></i>
          </button>
        </div>
        
        
    
        
            
          const searchButton = document.getElementById('search-button');
          const searchInput = document.getElementById('search-input');
          searchButton.addEventListener('click', () => {
            const inputValue = searchInput.value;
            alert(inputValue);
          });

Autocomplete

By adding extra JS code you can make your search input autocomplete as well.

Learn more about Autocomplete in the Autocomplete Docs

Edit in sandbox 
        
            
          <div class="input-group">
            <div id="search-autocomplete" class="form-outline">
              <input type="search" id="form1" class="form-control" />
              <label class="form-label" for="form1">Search</label>
            </div>
            <button type="button" class="btn btn-primary">
              <i class="fas fa-search"></i>
            </button>
          </div>
          
        
    
        
            
          const basicAutocomplete = document.querySelector('#search-autocomplete');
          const data = ['One', 'Two', 'Three', 'Four', 'Five'];
          const dataFilter = (value) => {
            return data.filter((item) => {
              return item.toLowerCase().startsWith(value.toLowerCase());
            });
          };

          new mdb.Autocomplete(basicAutocomplete, {
            filter: dataFilter
          });

Focus

You can make your input in search component focusable by pressing ctrl + alt shortcut. You are able to easily change combinations of shortcuts by modifing keys array in JS code. For example to change ControlLeft to e key just swap it to KeyE etc.

Edit in sandbox 
        
            
        <div class="input-group">
          <div class="form-outline">
            <input id="search-focus" type="search" id="form1" class="form-control" />
            <label class="form-label" for="form1">Search</label>
          </div>
          <button type="button" class="btn btn-primary">
            <i class="fas fa-search"></i>
          </button>
        </div>
        
        
    
        
            
        const searchFocus = document.getElementById('search-focus');
        const keys = [
          { keyCode: 'AltLeft', isTriggered: false },
          { keyCode: 'ControlLeft', isTriggered: false },
        ];

        window.addEventListener('keydown', (e) => {
          keys.forEach((obj) => {
            if (obj.keyCode === e.code) {
              obj.isTriggered = true;
            }
          });

          const shortcutTriggered = keys.filter((obj) => obj.isTriggered).length === keys.length;

          if (shortcutTriggered) {
            searchFocus.focus();
          }
        });

        window.addEventListener('keyup', (e) => {
          keys.forEach((obj) => {
            if (obj.keyCode === e.code) {
              obj.isTriggered = false;
            }
          });
        });

Navbar

Search is easily integrated with plenty of our components such as navbar.

Learn more about Navbar in the Navbar Docs

Edit in sandbox 
        
            
          <section class="border p-4 mb-4 d-flex align-items-center flex-column">
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <!-- Container wrapper -->
              <div class="container-fluid">
                <!-- Navbar brand -->
                <a class="navbar-brand" href="#">Brand</a>

                <!-- Toggle button -->
                <button 
                  class="navbar-toggler" 
                  type="button" 
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarSupportedContent" 
                  aria-controls="navbarSupportedContent"
                  aria-expanded="false" 
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>

                <!-- Collapsible wrapper -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <!-- Left links -->
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <!-- Navbar dropdown -->
                    <li class="nav-item dropdown">
                      <a 
                        class="nav-link dropdown-toggle" 
                        href="#" 
                        id="navbarDropdown" 
                        role="button"
                        data-mdb-toggle="dropdown" 
                        aria-expanded="false"
                      >
                        Dropdown
                      </a>
                      <!-- Dropdown menu -->
                      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider" /></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                      </ul>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                  </ul>
                  <!-- Left links -->

                  <!-- Search form -->
                  <div class="input-group ps-5">
                    <div id="navbar-search-autocomplete" class="form-outline">
                      <input type="search" id="form1" class="form-control" />
                      <label class="form-label" for="form1">Search</label>
                    </div>
                    <button type="button" class="btn btn-primary">
                      <i class="fas fa-search"></i>
                    </button>
                  </div>
                </div>
                <!-- Collapsible wrapper -->
              </div>
              <!-- Container wrapper -->
            </nav>
            <!-- Navbar -->
          </section>
        
        
    
        
            
        const navbarAutocomplete = document.querySelector('#navbar-search-autocomplete');
        const navbarData = ['One', 'Two', 'Three', 'Four', 'Five'];
        const navbarDataFilter = (value) => {
          return navbarData.filter((item) => {
            return item.toLowerCase().startsWith(value.toLowerCase());
          });
        };

        new mdb.Autocomplete(navbarAutocomplete, {
          filter: navbarDataFilter,
        });

Dropdown

Moreover, you can integrate our search with dropdown component

Learn more about Dropdowns in the Dropdowns Docs

Edit in sandbox 
        
            
      <a 
        class="nav-link dropdown-toggle hidden-arrow btn btn-primary"
        href="#"
        id="navbarDropdownMenuLink"
        role="button"
        data-mdb-toggle="dropdown"
        aria-expanded="false"
      >
        dropdown
      </a>
      <ul class="dropdown-menu dropdown-menu-left" aria-labelledby="navbarDropdownMenuLink">
        <li>
          <div class="input-group mt-2 mx-2">
            <div class="form-outline">
              <input type="search" id="form1" class="form-control-dropdown" />
              <label class="form-label" for="form1">Search</label>
            </div>
          </div>
        </li>
        <li><hr class="dropdown-divider" /></li>
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
      
        
    
        
            
      const searchInputDropdown = document.getElementById('search-input-dropdown');
      const dropdownOptions = document.querySelectorAll('.input-group-dropdown-item');

      searchInputDropdown.addEventListener('input', () => {
        const filter = searchInputDropdown.value.toLowerCase();
        showOptions();
        const valueExist = !!filter.length;

        if (valueExist) {
          dropdownOptions.forEach((el) => {
            const elText = el.textContent.trim().toLowerCase();
            const isIncluded = elText.includes(filter);
            if (!isIncluded) {
              el.style.display = 'none';
            }
          });
        }
      });

      const showOptions = () => {
        dropdownOptions.forEach((el) => {
          el.style.display = 'flex';
        })
      }

Datatable

It works perfectly with MDB datatables.

Learn more about Datatables in the Datatables Docs

Edit in sandbox 
        
            
          <div class="form-outline mb-4">
            <input type="search" class="form-control" id="datatable-search-input">
            <label class="form-label" for="datatable-search-input">Search</label>
          </div>
          <div id="datatable">
          </div>
          
        
    
        
            
          const data2 = {
            columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
            rows: [
              ['Tiger Nixon', 'System Architect', '	Edinburgh', 61, '2011/04/25', '$320,800'],
              ['Sonya Frost', 'Software Engineer', 'Edinburgh', 23, '2008/12/13', '$103,600'],
              ['Jena Gaines', 'Office Manager', 'London', 30, '2008/12/19', '$90,560'],
              ['Quinn Flynn', 'Support Lead', 'Edinburgh', 22, '2013/03/03', '$342,000'],
              ['Charde Marshall', 'Regional Director', 'San Francisco', 36, '2008/10/16', '$470,600'],
              ['Haley Kennedy', 'Senior Marketing Designer', 'London', 43, '2012/12/18', '$313,500'],
              ['Tatyana Fitzpatrick', 'Regional Director', 'London', 19, '2010/03/17', '$385,750'],
              ['Michael Silva', 'Marketing Designer', 'London', 66, '2012/11/27', '$198,500'],
              ['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 64, '2010/06/09', '$725,000'],
              ['Gloria Little', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],
            ],
          };

          const instance = new mdb.Datatable(document.getElementById('datatable'), data2)

          document.getElementById('datatable-search-input').addEventListener('input', (e) => {
            instance.input-group(e.target.value);
          });

Select

You can also find search option in select input by adding to select attribute data-mdb-filter="true"

Learn more about Select in the Select Docs

Edit in sandbox 
        
            
          <select class="select" data-mdb-filter="true">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
            <option value="7">Seven</option>
            <option value="8">Eight</option>
            <option value="9">Nine</option>
            <option value="10">Ten</option>
          </select>

Sidenav

You can create your own search in sidenav. Look in to example below.

Learn more about Sidenav in the Sidenav Docs

Edit in sandbox 
        
            
                <!-- Sidenav-->
                <div 
                  id="sidenav-3"
                  data-mdb-close-on-esc="false"
                  class="sidenav"
                  data-mdb-hidden="false"
                  data-mdb-position="absolute"
                  data-mdb-focus-trap="false"
                  data-mdb-scroll-container="#scroll-container"
                  role="navigation"
                >
                  <div class="text-center">
                    <h3 class="py-4">Examples</h3>
                    <hr class="m-0" />
                  </div>
                  <ul id="scroll-container" class="sidenav-menu">
                    <li class="sidenav-item">
                      <div class="input-group rounded my-2">
                        <div class="form-outline">
                          <input id="search-input-sidenav" type="search" id="form1" class="form-control" />
                          <label class="form-label" for="form1">Search</label>
                        </div>
                      </div>
                    </li>
                    <li class="sidenav-item">
                      <a class="sidenav-link">
                        <i class="far fa-smile pe-3"></i><span>Link 1</span>
                      </a>
                    </li>
                    <li class="sidenav-item">
                      <a class="sidenav-link">
                        <i class="far fa-smile pe-3"></i><span>Link 2</span>
                      </a>
                    </li>
                    <li class="sidenav-item">
                      <a class="sidenav-link">
                        <i class="far fa-smile pe-3"></i><span>Link 3</span>
                      </a>
                    </li>
                    <li class="sidenav-item">
                      <a class="sidenav-link">
                        <i class="far fa-smile pe-3"></i><span>Link 4</span>
                      </a>
                    </li>
                    <li class="sidenav-item">
                      <a class="sidenav-link">
                        <i class="far fa-smile pe-3"></i><span>Link 5</span>
                      </a>
                    </li>
                    <li class="sidenav-item">
                      <a class="sidenav-link">
                        <i class="far fa-smile pe-3"></i><span>Link 6</span>
                      </a>
                    </li>
                    <li class="sidenav-item">
                      <a class="sidenav-link">
                        <i class="far fa-smile pe-3"></i><span>Link 7</span>
                      </a>
                    </li>
                    <li class="sidenav-item">
                      <a class="sidenav-link">
                        <i class="far fa-smile pe-3"></i><span>Link 8</span>
                      </a>
                    </li>
                  </ul>

                  <div class="text-center" style="min-height: 3rem;">
                    <hr class="mt-0 mb-2" />
                    <small>mdbootstrap.com</small>
                  </div>
                </div>

                <!-- Sidenav-->
                
        
    
        
            
                const searchInputSidenav = document.getElementById('search-input-sidenav');
                const sidenavOptions = document.querySelectorAll('#sidenav-3 li .sidenav-link');

                searchInputSidenav.addEventListener('input', () => {
                  const filter = searchInputSidenav.value.toLowerCase();
                  showSidenavOptions();
                  const valueExist = !!filter.length;

                  if (valueExist) {
                    sidenavOptions.forEach((el) => {
                      const elText = el.textContent.trim().toLowerCase();
                      const isIncluded = elText.includes(filter);
                      if (!isIncluded) {
                        el.style.display = 'none';
                      }
                    });
                  }
                });

                const showSidenavOptions = () => {
                  sidenavOptions.forEach((el) => {
                    el.style.display = 'flex';
                  });
                };