Search

React 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.

        
            
      import React from 'react';
      import { MDBInputGroup, MDBInput, MDBIcon, MDBBtn } from 'mdb-react-ui-kit';

      export default function App() {
        return (
          <MDBInputGroup>
            <MDBInput label='Search' />
            <MDBBtn rippleColor='dark'>
              <MDBIcon icon='search' />
            </MDBBtn>
          </MDBInputGroup>
        );
      }

Search event

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

        
            
      import React, { useState } from 'react';
      import { MDBInputGroup, MDBInput, MDBIcon, MDBAlert, MDBBtn } from 'mdb-react-ui-kit';

      export default function App() {
        const [showSearchAlert, setShowSearchAlert] = useState(false);

        return (
          <>
            <MDBInputGroup>
              <MDBInput label='Search' />
              <MDBBtn onClick={() => setShowSearchAlert(true)} rippleColor='dark'>
                <MDBIcon icon='search' />
              </MDBBtn>
            </MDBInputGroup>

            <MDBAlert delay={1000} position='top-right' autohide appendToBody show={showSearchAlert}>
              Search!
            </MDBAlert>
          </>
        );
      }

Autocomplete

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

Learn more about Autocomplete in the Autocomplete Docs 

        
            
      import React from 'react';
      import { MDBInputGroup, MDBAutocomplete, MDBIcon, MDBBtn } from 'mdb-react-ui-kit';

      export default function App() {
        const data = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'];

        return (
          <MDBInputGroup>
            <MDBAutocomplete
              label='Example label'
              dataFilter={(value: any) => {
                return data.filter((item) => {
                  return item.toLowerCase().startsWith(value.toLowerCase());
                });
              }}
            />
            <MDBBtn rippleColor='dark'>
              <MDBIcon icon='search' />
            </MDBBtn>
          </MDBInputGroup>
        );
      }

Dropdown

Moreover, you can integrate our search with dropdown component

Learn more about Dropdowns in the Dropdowns Docs 

        
            
      import React from 'react';
      import {
        MDBInput,
        MDBIcon,
        MDBDropdown,
        MDBDropdownMenu,
        MDBDropdownToggle,
        MDBDropdownItem,
        MDBDropdownLink,
        MDBDropdownDivider,
      } from 'mdb-react-ui-kit';

      export default function App() {
        return (
          <MDBDropdown>
            <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
            <MDBDropdownMenu>
              <MDBDropdownItem>
                <MDBInput className='mt-2 bg-white' label='Search' />
              </MDBDropdownItem>
              <MDBDropdownDivider />
              <MDBDropdownItem>
                <MDBDropdownLink href='#'>Action</MDBDropdownLink>
              </MDBDropdownItem>
              <MDBDropdownItem>
                <MDBDropdownLink href='#'>Another action</MDBDropdownLink>
              </MDBDropdownItem>
              <MDBDropdownItem>
                <MDBDropdownLink href='#'>Something else here</MDBDropdownLink>
              </MDBDropdownItem>
            </MDBDropdownMenu>
          </MDBDropdown>
        );
      }