Rate this docs
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>
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 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 icon="twitter" class="blue-text"/></mdb-btn>
<mdb-btn type="button" color="white" rounded class="z-depth-1a"><mdb-icon 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 v-if="showModal" @close="showModal=false" cascade>
<mdb-modal-header class="light-blue darken-3 white-text">
<h4 class="title"><mdb-icon icon="pencil"/> 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="send" 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>