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" data-mdb-input-init>
    <input type="search" id="form1" class="form-control" />
    <label class="form-label" for="form1">Search</label>
  </div>
  <button type="button" class="btn btn-primary" data-mdb-ripple-init>
    <i class="fas fa-search"></i>
  </button>
</div>
// Initialization for ES Users
import { Input, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Input, Ripple });

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" data-mdb-ripple-init>search</button>
</div>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

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" data-mdb-input-init>
  <input type="search" id="form1" class="form-control" placeholder="Type query" aria-label="Search" />
</div>
// Initialization for ES Users
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

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" data-mdb-input-init>
    <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>
import { Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

const searchButton = document.getElementById('search-button');
const searchInput = document.getElementById('search-input');
searchButton.addEventListener('click', () => {
  const inputValue = searchInput.value;
  alert(inputValue);
});
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" data-mdb-input-init>
    <input type="search" id="form1" class="form-control" />
    <label class="form-label" for="form1">Search</label>
  </div>
  <button type="button" class="btn btn-primary" data-mdb-ripple-init>
    <i class="fas fa-search"></i>
  </button>
</div>
import { Autocomplete, Input, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Input, Ripple });

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 Autocomplete(basicAutocomplete, {
  filter: dataFilter
});
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" data-mdb-input-init>
    <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" data-mdb-ripple-init>
    <i class="fas fa-search"></i>
  </button>
</div>
import { Input, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Input, Ripple });

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;
    }
  });
});
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-body-tertiary">
    <!-- 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-collapse-init
        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-dropdown-init
              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" data-mdb-input-init>
            <input type="search" id="form1" class="form-control" />
            <label class="form-label" for="form1">Search</label>
          </div>
          <button type="button" class="btn btn-primary" data-mdb-ripple-init>
            <i class="fas fa-search"></i>
          </button>
        </div>
      </div>
      <!-- Collapsible wrapper -->
    </div>
    <!-- Container wrapper -->
  </nav>
  <!-- Navbar -->
</section>
import { Autocomplete, Collapse, Dropdown, Input, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Collapse, Dropdown, Input, Ripple });

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 Autocomplete(navbarAutocomplete, {
  filter: navbarDataFilter,
});
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="dropdown-toggle hidden-arrow btn btn-primary"
  href="#"
  id="navbarDropdownMenuLink"
  role="button"
  data-mdb-dropdown-init
  data-mdb-ripple-init
  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 w-auto" data-mdb-input-init>
        <input type="search" id="search-input-dropdown" class="form-control" />
        <label class="form-label" for="search-input-dropdown">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>
import { Dropdown, Input, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Dropdown, Input, Ripple });

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';
  })
}
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

Name Position Office Age Start date Salary
Tiger NixonSystem Architect Edinburgh612011/04/25$320,800
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500

Rows per page:

10
1 - 10 of 10
Edit in sandbox 
<div class="form-outline mb-4" data-mdb-input-init>
  <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>
import { Datatable, Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

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 Datatable(document.getElementById('datatable'), data2)

document.getElementById('datatable-search-input').addEventListener('input', (e) => {
  instance.input-group(e.target.value);
});
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

One
Edit in sandbox 
<select data-mdb-select-init 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>
// Initialization for ES Users
import { Select, initMDB } from "mdb-ui-kit";

initMDB({ 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-sidenav-init
  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 w-auto" data-mdb-input-init>
          <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-->
import { Input, Sidenav, initMDB } from "mdb-ui-kit";

initMDB({ Input, 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';
  });
};
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';
  });
};