web
mobile

React Bootstrap AutocompleteMDB Pro component

React Autocomplete - Bootstrap 4 & Material Design

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.

Live example

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;
            

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";
    

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" />

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} />