web
mobile
Edit these docs Rate these docs

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

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;
            

Edit these docs Rate these docs

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

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 Methods

Name Description Example
getValue Returns input value on onChange event <MDBAutocomplete getValue={this.logValue} />