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.


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.



Threshold

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


Custom item template

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


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.


Validation

Looks good!
Input value is required

Autocomplete - API


Import


        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 Element - Custom HTML template that will be displayed at the end of the component dropdown <MDBAutocomplete customContent={element} />
dataFilter Function - Function that returns filtered data to the component <MDBAutocomplete dataFilter={(value: any) => { return data.filter((item) => { return item.toLowerCase().startsWith(value.toLowerCase()); }); }} />
displayValue Function - Function executed for complex search results, to get value to display in the results list <MDBAutocomplete displayValue={(value: any) => value.title} />
inputValue String - Stores value of the MDBAutocomplete input <MDBAutocomplete inputValue={input} />
itemContent Function - Function that returns custom template for result item <MDBAutocomplete itemContent={customContent} />
setInputValue String - Set value of the MDBAutocomplete input <MDBAutocomplete setInputValue={setInput} />
threshold Number 0 Minimum input length to start search query <MDBAutocomplete threshold={3} />
tag String 'div' Defines a tag type for the MDBAutocomplete <MDBAutocomplete tag='span' />