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.
<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.
<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 without additional elements
Here is an example of how you can make a search component without any element attached:
<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.
<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
<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.
<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;
}
});
});
Dropdown
Moreover, you can integrate our search with dropdown component
Learn more about Dropdowns in the Dropdowns Docs
<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
<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
<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>