React Bootstrap Autocomplete
React Autocomplete - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
React Bootstrap Autocomplete is a component which predicts the words basing on the
first few letters given by a user, while one is typing it. It takes in an Array full of
suggestions.
You can use ↑ and ↓ arrow keys to navigate through options and use ↵ key to select required option.
Note info: If you want to use new version of Autocomplete please see our API docs which is available above in the tab section.
You can see a live example of MDBAutocompleteV5 here.
Basic example
import React, { Component } from "react";
import { MDBContainer, MDBAutocomplete } from "mdbreact";
const states = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illnois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
];
class AutocompletePage extends Component {
logValue = value => {
console.log(value);
};
render() {
return (
<MDBContainer>
<MDBAutocomplete
data={states}
label="Choose your favorite state"
icon="heart"
clear
id="input"
getValue={this.logValue}
/>
</MDBContainer>
);
}
}
export default AutocompletePage;
Autocomplete within form
Sign up
or Sign up with:
import React from 'react';
import {
MDBAutocomplete,
MDBRow,
MDBCol,
MDBInput,
MDBBtn,
MDBCard,
MDBCardBody,
MDBModalFooter,
MDBIcon
} from 'mdbreact';
const countries = [
"Afghanistan",
"Albania",
"Algeria",
"Andorra",
"Angola",
"Antigua and Barbuda",
"Argentina",
"Armenia",
"Australia",
"Austria",
"Azerbaijan",
"Bahamas",
"Bahrain",
"Bangladesh",
"Barbados",
"Belarus",
"Belgium",
"Belize",
"Benin",
"Bhutan",
"Bolivia",
"Bosnia and Herzegovina",
"Botswana",
"Brazil",
"Brunei",
"Bulgaria",
"Burkina Faso",
"Burundi",
"Cabo Verde",
"Cambodia",
"Cameroon",
"Canada",
"Central African Republic (CAR)",
"Chad",
"Chile",
"China",
"Colombia",
"Comoros",
"Costa Rica",
"Cote d'Ivoire",
"Croatia",
"Cuba",
"Cyprus",
"Czech Republic",
"Denmark",
"Djibouti",
"Dominica",
"Dominican Republic",
"Ecuador",
"Egypt",
"El Salvador",
"Equatorial Guinea",
"Eritrea",
"Estonia",
"Ethiopia",
"Fiji",
"Finland",
"France",
"Gabon",
"Gambia",
"Georgia",
"Germany",
"Ghana",
"Greece",
"Grenada",
"Guatemala",
"Guinea",
"Guinea-Bissau",
"Guyana",
"Haiti",
"Honduras",
"Hungary",
"Iceland",
"India",
"Indonesia",
"Iran",
"Iraq",
"Ireland",
"Israel",
"Italy",
"Jamaica",
"Japan",
"Jordan",
"Kazakhstan",
"Kenya",
"Kiribati",
"Kosovo",
"Kuwait",
"Kyrgyzstan",
"Laos",
"Latvia",
"Lebanon",
"Lesotho",
"Liberia",
"Libya",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macedonia (FYROM)",
"Madagascar",
"Malawi",
"Malaysia",
"Maldives",
"Mali",
"Malta",
"Marshall Islands",
"Mauritania",
"Mauritius",
"Mexico",
"Micronesia",
"Moldova",
"Monaco",
"Mongolia",
"Montenegro",
"Morocco",
"Mozambique",
"Myanmar (Burma)",
"Namibia",
"Nauru",
"Nepal",
"Netherlands",
"New Zealand",
"Nicaragua",
"Niger",
"Nigeria",
"North Korea",
"Norway",
"Oman",
"Pakistan",
"Palau",
"Palestine",
"Panama",
"Papua New Guinea",
"Paraguay",
"Peru",
"Philippines",
"Poland",
"Portugal",
"Qatar",
"Romania",
"Russia",
"Rwanda",
"Saint Kitts and Nevis",
"Saint Lucia",
"Saint Vincent and the Grenadines",
"Samoa",
"San Marino",
"Sao Tome and Principe",
"Saudi Arabia",
"Senegal",
"Serbia",
"Seychelles",
"Sierra Leone",
"Singapore",
"Slovakia",
"Slovenia",
"Solomon Islands",
"Somalia",
"South Africa",
"South Korea",
"South Sudan",
"Spain",
"Sri Lanka",
"Sudan",
"Suriname",
"Swaziland",
"Sweden",
"Switzerland",
"Syria",
"Taiwan",
"Tajikistan",
"Tanzania",
"Thailand",
"Timor-Leste",
"Togo",
"Tonga",
"Trinidad and Tobago",
"Tunisia",
"Turkey",
"Turkmenistan",
"Tuvalu",
"Uganda",
"Ukraine",
"United Arab Emirates (UAE)",
"United Kingdom (UK)",
"United States of America (USA)",
"Uruguay",
"Uzbekistan",
"Vanuatu",
"Vatican City (Holy See)",
"Venezuela",
"Vietnam",
"Yemen",
"Zambia",
"Zimbabwe"
];
class AutocompleteExample extends React.Component {
render() {
const smallStyle = { fontSize: '0.8rem'}
return (
<MDBRow>
<MDBCol md="9" lg="7" xl="5" className="mx-auto mt-3">
<MDBCard>
<MDBCardBody className="mx-4">
<div className="text-center">
<h3 className="dark-grey-text mb-5"><strong>Sign in</strong></h3>
</div>
<MDBInput label="Your email" group type="email" validate error="wrong" success="right"/>
<MDBInput label="Your password" group type="password" validate containerClass="mb-0"/>
<MDBAutocomplete label="Your country" clear data={countries}/>
<div className="text-center pt-3 mb-3">
<MDBBtn type="button" gradient="blue" rounded className="btn-block z-depth-1a">Sign in</MDBBtn>
</div>
<p className="dark-grey-text text-right d-flex justify-content-center mb-3 pt-2" style={smallStyle}> or Sign up with:</p>
<div className="row my-3 d-flex justify-content-center">
<MDBBtn type="button" color="white" rounded className="mr-md-3 z-depth-1a"><MDBIcon fab icon="facebook-f" className="blue-text text-center" /></MDBBtn>
<MDBBtn type="button" color="white" rounded className="mr-md-3 z-depth-1a"><MDBIcon fab icon="twitter" className="blue-text" /></MDBBtn>
<MDBBtn type="button" color="white" rounded className="z-depth-1a"><MDBIcon fab icon="google-plus-g" className="blue-text" /></MDBBtn>
</div>
</MDBCardBody>
<MDBModalFooter className="mx-5 pt-3 mb-1">
<p className="grey-text d-flex justify-content-end" style={smallStyle}>Already a member? <a href="#!" className="blue-text ml-1"> Sign In</a></p>
</MDBModalFooter>
</MDBCard>
</MDBCol>
</MDBRow>
);
}
}
export default AutocompleteExample;
Autocomplete within modal
import React, { Component } from "react";
import {
MDBContainer,
MDBAutocomplete,
MDBInput,
MDBBtn,
MDBModal,
MDBModalHeader,
MDBModalBody,
MDBIcon
} from "mdbreact";
const subjects = [
"Where's My Stuff?",
"Cancel Items or Orders",
"Returns & Refunds",
"Shipping Rates & Information",
"Change Your Payment Method",
"Manage Your Account Information",
"About Two-Step Verification",
"Cancel Items or Orders",
"Change Your Order Information",
"Contact Third-Party Sellers",
"More in Managing Your Orders"
];
class AutocompletePage extends Component {
state = {
modal: false
};
toggle = () => {
this.setState({
modal: !this.state.modal
});
};
logValue = value => {
console.log(value);
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle} className="mx-auto">
launch modal contact
</MDBBtn>
<MDBModal
isOpen={this.state.modal}
toggle={this.toggle}
size="md"
cascading
>
<MDBModalHeader
toggle={this.toggle}
titleClass="d-inline title"
className="text-center light-blue darken-3 white-text"
>
<MDBIcon icon="pencil-alt" />
Contact From
</MDBModalHeader>
<MDBModalBody>
<MDBInput label="Your name" />
<MDBInput label="Your email" iconClass="dark-grey" />
<MDBAutocomplete label="Subject" data={subjects} clear />
<MDBInput
label="Your message"
type="textarea"
rows="2"
icon="pencil-alt"
iconClass="dark-grey"
/>
<div className="text-center mt-1-half">
<MDBBtn
color="info"
className="mb-2"
onClick={this.toggle}
>
send
<MDBIcon icon="paper-plane" className="ml-1" />
</MDBBtn>
</div>
</MDBModalBody>
</MDBModal>
</MDBContainer>
);
}
}
export default AutocompletePage;
React Autocomplete - API
In this section you will find advanced information about the Autocomplete component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.
Autocomplete import statement
In order to use Autocomplete component make sure you have imported proper module first.
import { MDBAutocomplete } from "mdbreact";
New version of Autocomplete what will have a major release in the future and will replace current version. You can easily use it now.
import { MDBAutocompleteV5 } from "mdbreact";
import { MDBAutoV5 } from "mdbreact";
API Reference: Autocomplete Properties
The table below shows the configuration options of the MDBAutocomplete component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className |
String | |
Adds custom classes | <MDBAutocomplete className="myClass" /> |
clear |
Boolean | true |
Switch on/off clear button | <MDBAutocomplete clear={false} /> |
clearClass |
String | |
Adds custom classes to clear button | <MDBAutocomplete clearClass="myClass" /> |
clearSize |
String | |
Adds custom size to clear button | <MDBAutocomplete clearSize="24" /> |
clearColor |
String | |
Adds custom color to clear button | <MDBAutocomplete clearColor="#a6a6a6" /> |
data |
Array[String] | |
Required! Array of options used to autocomplete input | <MDBAutocomplete data={["red", "green", "blue"]} /> |
disabled |
Boolean | false |
Disables component | <MDBAutocomplete disabled /> |
id |
String | |
Sets component ID | <MDBAutocomplete id="myId" /> |
label |
String | |
Sets label for Autocomplete input | <MDBAutocomplete label="Choose your favorite state" /> |
labelClass |
String | |
Adds custom classes to label | <MDBAutocomplete labelClass="myClass" /> |
icon |
String | |
Adds font-awesome icon |
<MDBAutocomplete icon="caret-right" />
|
iconBrand |
Boolean | false |
Use this property to set brand icon (fab) |
<MDBAutocomplete icon="twitter" iconBrand />
|
iconClass |
String | |
Adds custom classes to icon element |
<MDBAutocomplete icon="envelope" iconClass="customClass" />
|
iconLight |
Boolean | false |
Use this property to set light icon (fal) |
<MDBAutocomplete icon="twitter" iconLight />
|
iconRegular |
Boolean | false |
Use this property to set regular icon (far) |
<MDBAutocomplete icon="twitter" iconRegular />
|
iconSize |
String | |
Sets icon size |
<MDBAutocomplete icon="pencil-alt" size="5x" />
|
placeholder |
String | |
Adds placeholder text | <MDBAutocomplete placeholder="Choose your favorite state" /> |
valueDefault |
String | |
Sets default value of the autocomplete input | <MDBAutocomplete valueDefault="Default" /> |
API Reference: Autocomplete Properties
The table below shows the configuration options of the new MDBAutocompleteV5 component which will replace a current version of Autocomplete in the future.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className |
String | |
Adds custom classes | <MDBAutocompleteV5 className="myClass" /> |
clear |
Boolean | true |
Switch on/off clear button | <MDBAutocompleteV5 clear={false} /> |
clearClass |
String | |
Adds custom classes to clear button | <MDBAutocompleteV5 clearClass="myClass" /> |
data |
Array[String] or Object | |
Required! Array or object of options used to autocomplete input |
<MDBAutocompleteV5 data={["red", "green", "blue"]} /> <MDBAutocompleteV5 data={ data={[
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 }]} />
|
dataKey |
String | |
Required! If you are using a object you have to set key to display data from object | <MDBAutocompleteV5 data={[
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 }]} dataKey="title" /> |
disabled |
Boolean | false |
Disables component | <MDBAutocompleteV5 disabled /> |
focused |
Boolean | true |
Focus Autocomplete onClick/onFocus | <MDBAutocompleteV5 focused /> |
heightItem |
Number or String | 45 |
Set height to the each element on the list | <MDBAutocompleteV5 heightItem={45} /> |
highlight |
Boolean | false |
Set highlight of element in the list | <MDBAutocompleteV5 highlight /> |
highlightBold |
Boolean | false |
Set highlight bold to elements in the list | <MDBAutocompleteV5 highlightBold /> |
highlightStyles |
Object | false |
Set custom highlight styles to elements in the list | <MDBAutocompleteV5 highlightStyles={{color: 'red'}} /> |
icon |
String | |
Adds font-awesome icon |
<MDBAutocompleteV5 icon="caret-right" />
|
iconBrand |
Boolean | false |
Use this property to set brand icon (fab) |
<MDBAutocompleteV5 icon="twitter" iconBrand />
|
iconClass |
String | |
Adds custom classes to icon element |
<MDBAutocompleteV5 icon="envelope" iconClass="customClass" />
|
iconLight |
Boolean | false |
Use this property to set light icon (fal) |
<MDBAutocompleteV5 icon="twitter" iconLight />
|
iconRegular |
Boolean | false |
Use this property to set regular icon (far) |
<MDBAutocompleteV5 icon="twitter" iconRegular />
|
iconSize |
String | |
Sets icon size |
<MDBAutocompleteV5 icon="pencil-alt" size="5x" />
|
noSuggestion |
Array of one element | ['No options'] |
Set custom no suggestion option | <MDBAutocompleteV5 noSuggestion={['Your text']} /> |
highlightClasses |
String | false |
Set custom highlight classes to elements in the list | <MDBAutocompleteV5 highlightClasses="customHighlightClass" /> |
id |
String | |
Sets component ID | <MDBAutocompleteV5 id="myId" /> |
label |
String | |
Sets label for Autocomplete input | <MDBAutocompleteV5 label="Choose your favorite state" /> |
labelClass |
String | |
Adds custom classes to label | <MDBAutocompleteV5 labelClass="myClass" /> |
labelStyles |
String | |
Adds custom classes to label | <MDBAutocompleteV5 labelStyles={display: 'block'} /> |
placeholder |
String | |
Adds placeholder text | <MDBAutocompleteV5 placeholder="Choose your favorite state" /> |
valueDefault |
String | |
Sets default value of the autocomplete input | <MDBAutocompleteV5 valueDefault="Default" /> |
visibleOptions |
Number or String | 5 |
Sets number of visible elements in the list | <MDBAutocompleteV5 visibleOptions={5} /> |
API Reference: Autocomplete Methods
| Name | Description | Example |
|---|---|---|
getValue |
Returns input value on onChange event |
<MDBAutocomplete getValue={this.logValue} />
|