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
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 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 ... />
|
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" ... />
|
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" />
|