Search

Bootstrap 5 Search component

Search component is created with custom JavaScript, css and material input connected with search button.

Basic example


                <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 with outline input
  • Search without additional elements

Search with icon


          <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


          <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 with outline input


          <div class="form-outline">
            <input type="search" id="form1" class="form-control" />
            <label class="form-label" for="form1">Search</label>
          </div>

Search without additional elements


                    <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 MDB Pro component

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

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

Navbar MDB Pro component

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

Dropdown

Moreover, you can integrate our search with dropdown component


          <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 MDB Pro component

Moreover, you can integrate our search with dropdown component

Select MDB Pro component

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

Sidenav MDB Pro component

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