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 within modal MDB Pro component
<template>
<mdb-row>
<mdb-btn @click.native="showModal = true" rounded>Launch demo modal</mdb-btn>
<mdb-modal :show="showModal" @close="showModal=false" cascade>
<mdb-modal-header class="light-blue darken-3 white-text">
<h4 class="title"><mdb-icon icon="pencil-alt"/> Contact form</h4>
</mdb-modal-header>
<mdb-modal-body>
<mdb-input icon="envelope" label="Your name"/>
<mdb-input icon="lock" label="Your email"/>
<mdb-autocomplete icon="tag" label="Subject" :data="subjects"/>
<mdb-textarea icon="pencil" label="Your message"/>
<div class="text-center">
<mdb-btn color="info" class="mb-2 waves-light">Send <mdb-icon icon="paper-plane" class="ml-1"></mdb-icon></mdb-btn>
</div>
</mdb-modal-body>
</mdb-modal>
</mdb-row>
</template>
<script>
import { mdbAutocomplete, mdbRow, mdbInput, mdbTextarea, mdbBtn, mdbModal, mdbModalHeader, mdbModalBody, mdbIcon } from 'mdbvue';
export default {
name: 'AutocompletePage',
components: {
mdbAutocomplete,
mdbRow,
mdbInput,
mdbTextarea,
mdbBtn,
mdbModal,
mdbModalHeader,
mdbModalBody,
mdbIcon
},
data() {
return {
subjects: [
"Where's My Stuff?",
"Cancel Items or Orders",
"Returns & Refunds",
"Shipping Rates & Information",
"Change Your Payment Method",
"Manage Your Account Information",
"About Two-Step Verification",
"Cancel Items or Orders",
"Change Your Order Information",
"Contact Third-Party Sellers",
"More in Managing Your Orders"
],
showModal: false
};
}
}
</script>
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" />
|