web
mobile

Vue Bootstrap Autocomplete

Vue Autocomplete - Bootstrap 4 & Material Design

Vue 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.

Since MDB Vue 6.2.0 you can use the v-model directive for two-way data binding in the mdbAutocomplete component

Vue live preview

Basic example MDB Pro component


        <template>
          <mdb-autocomplete
            :data="states"
            label="What is your favorite US state?"
            v-model="state"
          />
        </template>
      

        <script>
          import { mdbAutocomplete } from "mdbvue";
          export default {
            name: "AutocompletePage",
            components: {
              mdbAutocomplete
            },
            data() {
              return {
                state: "",
                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"
                ]
              };
            }
          };
        </script>
      

Outline MDB Pro component


        <template>
          <mdb-autocomplete
            outline
            :data="states"
            label="What is your favorite US state?"
          />
        </template>
      

        <script>
          import { mdbAutocomplete } from "mdbvue";
          export default {
            name: "AutocompletePage",
            components: {
              mdbAutocomplete
            },
            data() {
              return {
                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"
                ]
              };
            }
          };
        </script>
      

Customization

You can customize the autocomplete's appearance by using adding custom icons, managing the number of options visible in the scrollable dropdown or disabling scrolling behaviour. Take a look at the API tab to explore all of the possible options.


        <template>
          <mdb-autocomplete
            icon="paper-plane"
            far
            :display="6"
            :data="states"
            placeholder="..."
            label="..."
          />
        </template>
      

Custom filter function

You can overwrite the filtering logic with the filterFunction property.


        <template>
          <mdb-autocomplete
            outline
            :data="states"
            label="Select your state"
            :filterFunction="filterResults"
          />
        </template>
      

        <script>
          import { mdbAutocomplete } from "mdbvue";
          export default {
            name: "AutocompletePage",
            components: {
              mdbAutocomplete
            },
            data() {
              return {
                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"
                ]
              };
            },
            methods: {
              filterResults(item, search) {
                return item.toLowerCase().indexOf(search.toLowerCase()) === 0;
              }
            }
          };
        </script>
      

Async example

To fetch data asynchronously, add the isAsycs property to your component - it will provide a watcher for changes and display a message (which you can customize using the loadingText prop) while component awaits data.


        <template>
          <mdb-autocomplete
            @search="requestCountry"
            :data="countryList"
            :filterFunction="item => item"
            label="Select your country"
            :isAsync="true"
          />
        </template>
      

        <script>
          import { mdbAutocomplete } from "mdbvue";
          export default {
            name: "AutocompletePage",
            components: {
              mdbAutocomplete
            },
            data() {
              return {
                countryList: []
              };
            },
            methods: {
              requestCountry(value) {
                if (value === "") {
                  this.countryList = [];
                  return;
                }
                axios
                  .get(`https://restcountries.eu/rest/v2/name/${value}`)
                  .then(response => {
                    this.countryList = response.data.map(
                      country => country.name
                    );
                  })
                  .catch(err => {
                    console.log(err);
                    this.countryList = [];
                  });
              }
            }
          };
        </script>
      

Autocomplete within form MDB Pro component

Sign up

or Sign up with:


        <template>
          <mdb-card>
            <mdb-card-body class="mx-4">
              <div class="text-center">
                <h3 class="dark-grey-text mb-5"><strong>Sign up</strong></h3>
              </div>
              <mdb-input label="Your email" type="email" />
              <mdb-input
                label="Your password"
                type="password"
                containerClass="mb-0"
              />
              <mdb-autocomplete
                :data="countries"
                label="Your country"
                class="pb-3"
              />
              <div class="text-center mb-3">
                <mdb-btn
                  type="button"
                  gradient="blue"
                  rounded
                  class="btn-block z-depth-1a"
                  >Sign up</mdb-btn
                >
              </div>
              <p
                class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"
              >
                or Sign up with:
              </p>
              <div class="row my-3 d-flex justify-content-center">
                <mdb-btn
                  type="button"
                  color="white"
                  rounded
                  class="mr-md-3 z-depth-1a"
                  ><mdb-icon fab icon="facebook" class="blue-text text-center"
                /></mdb-btn>
                <mdb-btn
                  type="button"
                  color="white"
                  rounded
                  class="mr-md-3 z-depth-1a"
                  ><mdb-icon fab icon="twitter" class="blue-text"
                /></mdb-btn>
                <mdb-btn type="button" color="white" rounded class="z-depth-1a"
                  ><mdb-icon fab icon="google-plus" class="blue-text"
                /></mdb-btn>
              </div>
            </mdb-card-body>
            <mdb-modal-footer class="mx-5 pt-3 mb-1">
              <p class="font-small grey-text d-flex justify-content-end">
                Not a member? <a href="#" class="blue-text ml-1"> Sign In</a>
              </p>
            </mdb-modal-footer>
          </mdb-card>
        </template>
      

        <script>
          import {
            mdbAutocomplete,
            mdbInput,
            mdbBtn,
            mdbCard,
            mdbCardBody,
            mdbModalFooter,
            mdbIcon
          } from "mdbvue";
          export default {
            name: "AutocompletePage",
            components: {
              mdbAutocomplete,
              mdbInput,
              mdbBtn,
              mdbCard,
              mdbCardBody,
              mdbModalFooter,
              mdbIcon
            },
            data() {
              return {
                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"
                ]
              };
            }
          };
        </script>
      

        <style scoped>
          .font-small {
            font-size: 0.8rem;
          }
        </style>
      

Autocomplete - API

In this section you will find advanced information about the Autocomplete component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use to work with it.


Import statement


        import { mdbAutocomplete } from 'mdbvue';
      

API Reference: Properties

Name Type Default Description Example
data Array [] Array of all available options (string) <mdb-autocomplete :data="['option 1', 'option 2']" ... />
isAsync Boolean false Component will display loading information until data is fetched <mdb-autocomplete isAsync ... />
showAll Boolean false If set to true, the component will display all options on empty search <mdb-autocomplete showAll ... />
label String Add description to the component label <mdb-autocomplete label="Example label" ... />
placeholder String Add content to the component placeholder <mdb-autocomplete placeholder="Example placeholder" ... />
icon String Adds icon on the left site of the input <mdb-autocomplete icon="envelope" ... />
iconClass String Adds custom class to the icon <mdb-autocomplete icon="envelope" iconClass="yellow-text" ... />
far Boolean false Sets icon's style to regular <mdb-autocomplete far ... />
regular Boolean false Sets icon's style to regular <mdb-autocomplete regular ... />
fal Boolean false Sets icon's style to light <mdb-autocomplete fal ... />
light Boolean false Sets icon's style to light <mdb-autocomplete light ... />
fab Boolean false Sets icon's style to brands <mdb-autocomplete fab ... />
brands Boolean false Sets icon's style to brands <mdb-autocomplete brands ... />
fad Boolean false Sets icon's style to duotone <mdb-autocomplete fad ... />
duotone Boolean false Sets icon's style to duotone <mdb-autocomplete duotone ... />
outline Boolean false Changes component's style to outline <mdb-autocomplete outline ... />
bg Boolean false Sets design to animated border with background <mdb-autocomplete bg ... />
loadingText String 'Loading results...' Message displayed while the component with isAsync value is awaiting data <mdb-autocomplete isAsync loadingText="..." />
resultText String 'no results found' Message displayed when no matching results are found <mdb-autocomplete resultText="..." />
scroll Boolean true Makes dropdown scrollable with fixed maximum height <mdb-autocomplete :scroll="false" />
display Number 4 Maximum number of options displayed at once in the scrollable container <mdb-autocomplete :display="5" />
flipOnScroll Boolean true Enables flipping dropdown on scroll events <mdb-autocomplete :flipOnScroll="false" />
disabled Boolean false Disables autocomple input <mdb-autocomplete disabled />
clearBtn Boolean true Toggles the visibility of the clear button <mdb-autocomplete :clearBtn="false" />
filterFunction Function (item, search) => item.toLowerCase().indexOf(search.toLowerCase()) > -1 Functions takes two arguments - the data element and the search value and return Boolean value <mdb-autocomplete :filterFunction="filterFunction" />
validation Boolean false Setting this property to true will add required property to the nested input field <mdb-autocomplete validation />
wasValidated Boolean false Setting this property to true will add validated styling to the component <mdb-autocomplete validation wasValidated />
validFeedback [String, Boolean] false Valid feedback label <mdb-input validFeedback="Correct" ... />
invalidFeedback [String, Boolean] false Invalid feedback label <mdb-input :invalidFeedback="Incorrect" ... />
top Boolean false Opens the dropdown on the top by default <mdb-autocomplete top />
apoBodypendT Boolean false Appends the autocomplete's dropdown to the end of the document <mdb-autocomplete append-to-body />

API Reference: Events & directives

Name Description Example
v-model Allows for two way data binding <mdb-autocomplete v-model="option" />
@search Emits searched value <mdb-autocomplete @search="handleSearch" />
@focus Emitted on input's native focus event, meaning when the field gains focus. <mdb-autocomplete @focus="onFocus" />
@blur Emitted on input's native blur event, meaning when the field looses focus. <mdb-autocomplete @blur="onBlur" />
@clear Emitted when user clicks the x button <mdb-autocomplete @clear="clear" />