Rate this 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.


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
                          clearClass="grey-text"
                          id="input"
                          className="mx-auto"
                          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} clearClass="grey-text"/>
                                <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 icon="facebook" className="blue-text text-center" /></MDBBtn>
                                  <MDBBtn type="button" color="white" rounded className="mr-md-3 z-depth-1a"><MDBIcon icon="twitter" className="blue-text" /></MDBBtn>
                                  <MDBBtn type="button" color="white" rounded className="z-depth-1a"><MDBIcon icon="google-plus" 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";
      

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" />
data Array[String] Required! Array of options used to autocomplete imput <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 Autcomplete input <MDBAutocomplete label="Choose your favorite state" />
labelClass String Adds custom classes to label <MDBAutocomplete labelClass="myClass" />
icon String Adds icon prefix to Autocomplete input <MDBAutocomplete icon="pencil" />
iconClass String Adds custom clesses to icon <MDBAutocomplete iconClass="myClass" />
iconSize String Sets custom size, available options: lg | 2x | 3x | 4x | 5x <MDBAutocomplete iconSize="lg" />
placeholder String Adds placeholder text <MDBAutocomplete placeholder="Choose your favorite state" />

API Reference: Autocomplete Methods

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