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.

Autocomplete value

Material input uses $emit inside component. To handle value changes use @input event instead of v-model.


Basic example MDB Pro component


                <template>
                    <mdb-autocomplete
                        icon="heart"
                        clearClass="fa-lg"
                        :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>
          

Outline MDB Pro component


                <template>
                    <mdb-autocomplete
                        outline
                        icon="heart"
                        clearClass="fa-lg"
                        :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>
          

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 ... />
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 ... />
outline Boolean false Changes component's style to outline <mdb-autocomplete outline ... />

API Reference: Events

Name Description Example
v-on:input Used to listen to input event, returns Event <mdb-autocomplete @input="hanelOnInput" />
v-on:focus Emitted on input's native focus event, meaning when the field gains focus. <mdb-autocomplete @focus="onFocus" />
v-on:blur Emitted on input's native blur event, meaning when the field looses focus. <mdb-autocomplete @blur="onBlur" />