Autocomplete

React Bootstrap 5 Autocomplete component

Autocomplete component predicts the words being typed based on the first few letters given by the user. You can search the list using basic scroll and the keyboard arrows

Note: Read the API tab to find all available options and advanced customization

Basic example

The dataFilter property is required in order for component to work properly. The option accepts a function that is expected to return an array of results or a Promise that resolves to an array of results.

Example label

Show code

        
            
            import React from 'react';
            import { MDBAutocomplete } from 'mdb-react-ui-kit';
      
            export default function App() {
              const data = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'];

              return (
                <MDBAutocomplete
                  label='Example label'
                  dataFilter={(value: any) => {
                    return data.filter((item) => {
                      return item.toLowerCase().startsWith(value.toLowerCase());
                    });
                  }}
                />
              );
            }

Display value

The displayValue property allow to separate oryginal result value from the value that will be displayed in the result list or input (after selection). Its useful when the data returned by the dataFilter function is an array of objects. You can specify which parameter of the object should be displayed.

Example label

Show code

        
            
            import React from 'react';
            import { MDBAutocomplete } from 'mdb-react-ui-kit';
      
            export default function App() {
              const dataAdvanced = [
                { title: 'One', subtitle: 'Secondary text' },
                { title: 'Two', subtitle: 'Secondary text' },
                { title: 'Three', subtitle: 'Secondary text' },
                { title: 'Four', subtitle: 'Secondary text' },
                { title: 'Five', subtitle: 'Secondary text' },
                { title: 'Six', subtitle: 'Secondary text' },
              ];

              return (
                <MDBAutocomplete
                  label='Example label'
                  displayValue={(value: any) => value.title}
                  dataFilter={(value: any) => {
                    return dataAdvanced.filter((item) => {
                      return item.title.toLowerCase().startsWith(value.toLowerCase());
                    });
                  }}
                />
              );
            }

Asynchronous search

The function passed to the dataFilter property can return a Promise that resolves to an array of results. By default the component expects to receive data as an array of strings. If you want to return an array of objects instead, you can use displayValue property to specify which parameter should be used as a display value of the specific result.

Example label

Show code

        
            
            import React from 'react';
            import { MDBAutocomplete } from 'mdb-react-ui-kit';
      
            export default function App() {
              return (
                <MDBAutocomplete
                  label='Example label'
                  displayValue={(value: any) => value.name}
                  dataFilter={async (query: string) => {
                    const url = `https://swapi.py4e.com/api/people/?search=${encodeURI(query)}`;
                    const response = await fetch(url);
                    const data = await response.json();
                    return data.results;
                  }}
                />
              );
            }

Threshold

Use threshold property to specify a minimum number of the characters in the input field needed to perform a search operation.

Example label

Show code

        
            
            import React from 'react';
            import { MDBAutocomplete } from 'mdb-react-ui-kit';
      
            export default function App() {
              const data = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'];

              return (
                <MDBAutocomplete
                  label='Example label'
                  threshold={2}
                  dataFilter={(value: any) => {
                    return data.filter((item) => {
                      return item.toLowerCase().startsWith(value.toLowerCase());
                    });
                  }}
                />
              );
            }

Custom item template

The itemContent property allow to display custom HTML in the result list.

Example label

Show code

        
            
            import React from 'react';
            import { MDBAutocomplete } from 'mdb-react-ui-kit';
      
            export default function App() {
              const dataAdvanced = [
                { title: 'One', subtitle: 'Secondary text' },
                { title: 'Two', subtitle: 'Secondary text' },
                { title: 'Three', subtitle: 'Secondary text' },
                { title: 'Four', subtitle: 'Secondary text' },
                { title: 'Five', subtitle: 'Secondary text' },
                { title: 'Six', subtitle: 'Secondary text' },
              ];

              return (
                <MDBAutocomplete
                  label='Example label'
                  dataFilter={(value) => {
                    return dataAdvanced.filter((item) => {
                      return item.title.toLowerCase().startsWith(value.toLowerCase());
                    });
                  }}
                  onChange={(e) => console.log(e.target.value)}
                  onSelect={(e) => console.log(e)}
                  displayValue={(value) => value.title}
                  itemContent={(result) => (
                    <div className='autocomplete-custom-item-content'>
                      <div className='autocomplete-custom-item-title'>{result.title}</div>
                      <div className='autocomplete-custom-item-subtitle'>{result.subtitle}</div>
                    </div>
                  )}
                />
              );
            }

        
            
            .autocomplete-custom-item-content {
              display: flex;
              flex-direction: column;
            }

            .autocomplete-custom-item-title {
              font-weight: 500;
            }

            .autocomplete-custom-item-subtitle {
              font-size: 0.8rem;
            }

Custom content

A custom content container with a class .autocomplete-custom-content will be displayed at the end of the autocomplete-custom-item-subtitle dropdown. You can use it to display a number of search results.

Example label

Show code

        
            
            import React, { useState } from 'react';
            import { MDBAutocomplete } from 'mdb-react-ui-kit';
      
            export default function App() {
              const data = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'];
              const [searchResult, setSearchResult] = useState(data.length);

              return (
                <MDBAutocomplete
                  label='Example label'
                  getFilteredData={(data: Array<any>) => {
                    setSearchResult(data.length);
                  }}
                  dataFilter={(value: string) => {
                    return data.filter((item) => {
                      return item.toLowerCase().startsWith(value.toLowerCase());
                    });
                  }}
                  customContent={<div className='autocomplete-custom-content'>Search results: {searchResult}</div>}
                />
              );
            }

        
            
            .autocomplete-custom-content {
              padding: 6.5px 16px;
            }

Validation

The input value is automatically validated to ensure that it is a properly formatted email address.

Show code

        
            
            import React from 'react';
            import { MDBAutocomplete, MDBValidation, MDBBtn } from 'mdb-react-ui-kit';
      
            export default function App() {
              const data = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'];

              return (
                <MDBValidation>
                  <MDBValidationItem>
                    <MDBAutocomplete
                      required
                      label='Example label'
                      dataFilter={(value: any) => {
                        return data.filter((item) => {
                          return item.toLowerCase().startsWith(value.toLowerCase());
                        });
                      }}
                    />
                  </MDBValidationItem>
    
                  <MDBBtn size='sm' className='mt-3' type='submit'>
                    Submit
                  </MDBBtn>
                </MDBValidation>
              );
            }

Autocomplete - API

Import

Show code

        
            
        import { MDBAutocomplete } from 'mdb-react-ui-kit';

Properties

MDBAutocomplete

Name	Type	Default	Description	Example
`className`	String	`''`	Add custom class to the `MDBAutocomplete`	`<MDBAutocomplete className="class" />`
`customContent`	React.ReactNode	`-`	Custom HTML template that will be displayed at the end of the component dropdown	`<MDBAutocomplete customContent={element} />`
`listHeight`	number	`190`	The autcomplete list height	`<MDBAutocomplete listHeight={100} />`
`noResults`	string	`'No results found'`	Text displayed with no matching results	`<MDBAutocomplete noResults='-' />`
`threshold`	number	`0`	Minimum input length to start search query	`<MDBAutocomplete threshold={3} />`

Methods

Name	Type	Default	Description	Example
`dataFilter`	(value: string) => any	`-`	Function that returns filtered data to the component	`<MDBAutocomplete dataFilter={filterData} />`
`displayValue`	(value: any) => any	`-`	Function executed for complex search results, to get value to display in the results list	`<MDBAutocomplete displayValue={customDisplay} />`
`itemContent`	(value: any) => React.ReactNode	`-`	Function that returns custom template for result item	`<MDBAutocomplete itemContent={customContent} />`
`getFilteredData`	(data: Array) => any	`-`	Gets the filtered data on input change	`<MDBAutocomplete getFilteredData={getFiltered} />`
`onSelect`	(value: any) => any	`-`	Executed when option selected	`<MDBAutocomplete onSelect={onSelect} />`