Autocomplete
Vue Bootstrap 5 Autocomplete component
Autocomplete component predicts the words being typed based on the first few letters given by the user. You can search the list using basic scroll and the keyboard arrows
Note: Read the API tab to find all available options and advanced customization
Basic example
The filter property is required in order for component to
work properly. The property accepts a function that is expected to
return an array of results or a Promise that resolves to
an array of results.
<template>
<MDBAutocomplete
v-model="autocompleteBasic"
:filter="filterBasic"
label="Example label"
/>
</template>
<script>
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBAutocomplete
},
setup() {
const autocompleteBasic = ref("");
const optionsBasic = ref([
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight"
]);
const filterBasic = value => {
return optionsBasic.value.filter(item => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
return {
autocompleteBasic,
filterBasic
};
}
};
</script>
<script setup lang="ts">
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
const autocompleteBasic = ref("");
const optionsBasic = ref([
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight"
]);
const filterBasic = (value: string) => {
return optionsBasic.value.filter((item: string) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
</script>
Display value
The displayValue property allow to separate original
result value from the value that will be displayed in the result list
or input (after selection). Its useful when the data returned by the
filter function is an array of objects. You can specify
which parameter of the object should be displayed.
<template>
<MDBAutocomplete
v-model="autocompleteDisplay"
:filter="filterDisplay"
:displayValue="displayValueDisplay"
label="Example label"
/>
</template>
<script>
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBAutocomplete
},
setup() {
const autocompleteDisplay = ref("");
const optionsDisplay = ref([
{ title: "One", subtitle: "Secondary text" },
{ title: "Two", subtitle: "Secondary text" },
{ title: "Three", subtitle: "Secondary text" },
{ title: "Four", subtitle: "Secondary text" },
{ title: "Five", subtitle: "Secondary text" },
{ title: "Six", subtitle: "Secondary text" }
]);
const filterDisplay = value => {
return optionsDisplay.value.filter(item => {
return item.title.toLowerCase().startsWith(value.toLowerCase());
});
};
const displayValueDisplay = value => value.title;
return {
autocompleteDisplay,
filterDisplay,
displayValueDisplay
};
}
};
</script>
<script setup lang="ts">
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
interface Option {
title: string;
subtitle: string;
}
const autocompleteDisplay = ref("");
const optionsDisplay = ref([
{ title: "One", subtitle: "Secondary text" },
{ title: "Two", subtitle: "Secondary text" },
{ title: "Three", subtitle: "Secondary text" },
{ title: "Four", subtitle: "Secondary text" },
{ title: "Five", subtitle: "Secondary text" },
{ title: "Six", subtitle: "Secondary text" }
]);
const filterDisplay = (value: string) => {
return optionsDisplay.value.filter((item: Option) => {
return item.title.toLowerCase().startsWith(value.toLowerCase());
});
};
const displayValueDisplay = (value: Option) => value.title;
</script>
Asynchronous search
The function passed to the filter option can return a
Promise that resolves to an array of results. By default
the component expects to receive data as an array of strings. If you
want to return an array of objects instead, you can use
displayValue option to specify which parameter should be
used as a display value of the specific result.
<template>
<MDBAutocomplete
v-model="autocompleteAsync"
:filter="filterAsync"
:displayValue="displayValueAsync"
label="Example label"
/>
</template>
<script>
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBAutocomplete
},
setup() {
const autocompleteAsync = ref("");
const filterAsync = async query => {
const url = `https://swapi.py4e.com/api/people/?search=${encodeURI(
query
)}`;
const response = await fetch(url);
const data = await response.json();
return data.results;
};
const displayValueAsync = value => value.name;
return {
autocompleteAsync,
filterAsync,
displayValueAsync
};
}
};
</script>
<script setup lang="ts">
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
const autocompleteAsync = ref("");
const filterAsync = async (query: string) => {
const url = `https://swapi.py4e.com/api/people/?search=${encodeURI(
query
)}`;
const response = await fetch(url);
const data = await response.json();
return data.results;
};
const displayValueAsync = (value: object) => value.name;
</script>
Threshold
Use threshold property to specify a minimum number of the
characters in the input field needed to perform a search operation.
<template>
<MDBAutocomplete
v-model="autocompleteThreshold"
:filter="filterThreshold"
:threshold="2"
label="Example label"
placeholder="Type 2 characters to search"
/>
</template>
<script>
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBAutocomplete
},
setup() {
const autocompleteThreshold = ref("");
const optionsThreshold = ref([
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight"
]);
const filterThreshold = value => {
return optionsThreshold.value.filter(item => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
return {
autocompleteThreshold,
filterThreshold
};
}
};
</script>
<script setup lang="ts">
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
const autocompleteThreshold = ref("");
const optionsThreshold = ref([
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight"
]);
const filterThreshold = (value: string) => {
return optionsThreshold.value.filter((item: string) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
</script>
Custom item template
The itemContent property allow to display custom HTML in
the result list. You can use the optionHeight and
visibleOptions properties to modify the result list
height when you want to display more content in the component
dropdown.
<template>
<MDBAutocomplete
v-model="autocompleteTemplate"
:filter="filterTemplate"
:displayValue="displayValueTemplate"
:itemContent="itemTemplate"
label="Example label"
/>
</template>
<script>
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBAutocomplete
},
setup() {
const autocompleteTemplate = ref("");
const optionsTemplate = ref([
{ title: "One", subtitle: "Secondary text" },
{ title: "Two", subtitle: "Secondary text" },
{ title: "Three", subtitle: "Secondary text" },
{ title: "Four", subtitle: "Secondary text" },
{ title: "Five", subtitle: "Secondary text" },
{ title: "Six", subtitle: "Secondary text" }
]);
const itemTemplate = result => {
return `
<div class="autocomplete-custom-item-content">
<div class="autocomplete-custom-item-title">${result.title}</div>
<div class="autocomplete-custom-item-subtitle">${result.subtitle}</div>
</div>
`;
};
const filterTemplate = value => {
return optionsTemplate.value.filter(item => {
return item.title.toLowerCase().startsWith(value.toLowerCase());
});
};
const displayValueTemplate = value => value.title;
return {
autocompleteTemplate,
filterTemplate,
itemTemplate,
displayValueTemplate
};
}
};
</script>
<script setup lang="ts">
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
interface Option {
title: string;
subtitle: string;
}
const autocompleteTemplate = ref("");
const optionsTemplate = ref([
{ title: "One", subtitle: "Secondary text" },
{ title: "Two", subtitle: "Secondary text" },
{ title: "Three", subtitle: "Secondary text" },
{ title: "Four", subtitle: "Secondary text" },
{ title: "Five", subtitle: "Secondary text" },
{ title: "Six", subtitle: "Secondary text" }
]);
const itemTemplate = (result: Option) => {
return `
<div class="autocomplete-custom-item-content">
<div class="autocomplete-custom-item-title">${result.title}</div>
<div class="autocomplete-custom-item-subtitle">${result.subtitle}</div>
</div>
`;
};
const filterTemplate = (value: string) => {
return optionsTemplate.value.filter((item: Option) => {
return item.title.toLowerCase().startsWith(value.toLowerCase());
});
};
const displayValueTemplate = (value: Option) => value.title;
</script>
Custom content
Pass any content to a default slot to display a custom content container with a class .autocomplete-custom-content at the end of the items list. You can use it to display a number of search results.
<template>
<MDBAutocomplete
v-model="autocompleteContent"
:filter="filterContent"
@update="setResultsLength"
label="Example label"
>
Search results: {{ contentResultsLength }}
</MDBAutocomplete>
</template>
<script>
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBAutocomplete
},
setup() {
const autocompleteContent = ref("");
const optionsContent = ref([
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight"
]);
const contentResultsLength = ref(0);
const setResultsLength = event => {
contentResultsLength.value = event.length;
};
const filterContent = value => {
return optionsContent.value.filter(item => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
return {
autocompleteContent,
contentResultsLength,
setResultsLength,
filterContent
};
}
};
</script>
<script setup lang="ts">
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
const autocompleteContent = ref("");
const optionsContent = ref([
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight"
]);
const contentResultsLength = ref(0);
const setResultsLength = (event: string[]) => {
contentResultsLength.value = event.length;
};
const filterContent = (value: string) => {
return optionsContent.value.filter((item: string) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
</script>
Validation
<template>
<form
class="needs-validation"
novalidate
@submit.prevent="checkForm"
>
<div id="validation" class="form-outline">
<MDBAutocomplete
v-model="autocompleteValidation"
:filter="filterValidation"
validFeedback="Looks good!"
invalidFeedback="Input value is required!"
required
label="Example label"
/>
</div>
<MDBBtn color="primary" size="sm" class="mt-3" type="submit">
Submit
</MDBBtn>
</form>
</template>
<script>
import { MDBAutocomplete, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBAutocomplete, MDBBtn
},
setup() {
const autocompleteValidation = ref("");
const optionsValidation = ref([
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight"
]);
const filterValidation = value => {
return optionsValidation.value.filter(item => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
const checkForm = event => {
event.target.classList.add("was-validated");
};
return {
autocompleteValidation,
filterValidation,
checkForm
};
}
};
</script>
<script setup lang="ts">
import { MDBAutocomplete, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
const autocompleteValidation = ref("");
const optionsValidation = ref([
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight"
]);
const filterValidation = (value: string) => {
return optionsValidation.value.filter((item: string) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
const checkForm = (event: Event) => {
(event.target as HTMLFormElement).classList.add("was-validated");
};
</script>
You can create custom rules and show the validation results via isValidated and isValid properties.
<template>
<MDBRow
tag="form"
class="g-3 needs-validation"
novalidate
@submit.prevent="checkFormPro"
>
<MDBCol col="12">
<MDBAutocomplete
v-model="autocompleteBasic"
:filter="filterBasic"
label="Example label"
:isValidated="isAutocompleteValidated"
:isValid="isAutocompleteValid"
validFeedback="This value is valid"
invalidFeedback="This value is invalid"
@update:model-value="validateAutocomplete"
/>
</MDBCol>
<MDBCol col="12">
<MDBBtn color="primary" type="submit">Submit form</MDBBtn>
</MDBCol>
</MDBRow>
</template>
<script>
import { MDBAutocomplete MDBBtn, MDBRow, MDBCol } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect,
MDBBtn
},
setup() {
const autocompleteBasic = ref("");
const optionsBasic = ref([
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight",
]);
const filterBasic = (value: string) => {
return optionsBasic.value.filter((item: string) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
const isAutocompleteValidated = ref(false);
const isAutocompleteValid = ref(false);
const validateAutocomplete = () => {
if (!isAutocompleteValidated.value) {
return;
}
isAutocompleteValid.value =
optionsBasic.value.filter(
(v) =>
v.toLocaleLowerCase() === autocompleteBasic.value.toLocaleLowerCase()
).length !== 0 && autocompleteBasic.value !== "";
};
const checkFormPro = (e) => {
e.target.classList.add("was-validated");
isAutocompleteValidated.value = true;
validateAutocomplete();
};
return {
autocompleteBasic,
optionsBasic,
filterBasic,
isAutocompleteValidated,
isAutocompleteValid,
validateAutocomplete,
checkFormPro
};
}
};
</script>
<script setup lang="ts">
import { MDBAutocomplete, MDBBtn, MDBRow, MDBCol } from "mdb-vue-ui-kit";
import { ref } from "vue";
const autocompleteBasic = ref("");
const optionsBasic = ref([
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight",
]);
const filterBasic = (value: string) => {
return optionsBasic.value.filter((item: string) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
const isAutocompleteValidated = ref(false);
const isAutocompleteValid = ref(false);
const validateAutocomplete = () => {
if (!isAutocompleteValidated.value) {
return;
}
isAutocompleteValid.value =
optionsBasic.value.filter(
(v) =>
v.toLocaleLowerCase() === autocompleteBasic.value.toLocaleLowerCase()
).length !== 0 && autocompleteBasic.value !== "";
};
const checkFormPro = (e) => {
e.target.classList.add("was-validated");
isAutocompleteValidated.value = true;
validateAutocomplete();
};
</script>
Auto select
Set autoSelect option to true to enable selecting on Tab press.
<template>
<MDBAutocomplete v-model="autocompleteBasic" :filter="filterBasic" label="Example label" autoSelect />
</template>
<script>
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBAutocomplete
},
setup() {
const autocompleteBasic = ref("");
const optionsBasic = ref([
"One",
"Two",
"Three",
"Four",
"Five",
]);
const filterBasic = value => {
return optionsBasic.value.filter(item => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
return {
autocompleteBasic,
filterBasic
};
}
};
</script>
<script setup lang="ts">
import { MDBAutocomplete } from "mdb-vue-ui-kit";
import { ref } from "vue";
const autocompleteBasic = ref("");
const optionsBasic = ref([
"One",
"Two",
"Three",
"Four",
"Five",
]);
const filterBasic = (value: string) => {
return optionsBasic.value.filter((item: string) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
</script>
Autocomplete - API
Import
<script>
import { MDBAutocomplete } from "mdb-vue-ui-kit";
</script>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
autoSelect |
Boolean | false |
Enables auto selecting on Tab press |
filter |
Function | - |
Function that returns filtered data to the component |
keepOpen |
Boolean | False |
Prevents the autocomplete popup from closing after value select and click outside |
displayValue
|
Function | (value) => value |
Function executed for complex search results, to get value to display in the results list |
filter |
Function | - |
Function that returns filtered data to the component |
itemContent
|
Function | - |
Function that returns custom template for result item |
listHeight
|
Number | 190 |
Height of the result list |
noResultsText
|
String | 'No results found' |
Message that will be displayed in the component dropdown if no result is found |
threshold
|
Number | 300 |
Minimum input length to start search query |
optionHeight
|
Number | 38 |
Set height for single item |
visibleOptions
|
Number | 5 |
Set count of options visible without scroll |
Methods
| Name | Description | Example |
|---|---|---|
open |
Manually opens a component dropdown |
$refs.autocompleteRef.open()
|
close |
Manually closes a component dropdown |
$refs.autocompleteRef.close()
|
toggle |
Manually toggles a component dropdown |
$refs.autocompleteRef.toggle()
|
<template>
<MDBBtn color="primary" @click="autocompleteRef?.open()"
>Open autocomplete</MDBBtn
>
<MDBAutocomplete
ref="autocompleteRef"
v-model="autocompleteBasic"
:filter="filterBasic"
label="Example label"
/>
</template>
<script>
import { MDBAutocomplete, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBAutocomplete,
MDBBtn,
},
setup() {
const autocompleteRef = ref(null);
const autocompleteBasic = ref("");
const optionsBasic = ref([
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight",
]);
const filterBasic = (value) => {
return optionsBasic.value.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
return {
autocompleteBasic,
filterBasic,
autocompleteRef,
};
},
};
</script>
<script setup lang="ts">
import { MDBAutocomplete, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
const autocompleteRef = ref<InstanceType<typeof MDBAutocomplete> | null>(null);
const autocompleteBasic = ref("");
const optionsBasic = ref([
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight",
]);
const filterBasic = (value: string) => {
return optionsBasic.value.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
</script>
Slots
| Name | Description |
|---|---|
default |
Slot for custom list content |
Events
| Name | Description |
|---|---|
open
|
This event fires immediately when the autocomplete dropdown is opened. |
close
|
This event fires immediately when the autocomplete dropdown is closed. |
itemSelect
|
This event fires immediately when the autocomplete item is selected. |
update
|
This event fires immediately when the autocomplete results list is updated. |
<template>
<MDBAutocomplete v-model="autocompleteBasic" :filter="filterBasic" label="Example label" @open="doSomething" />
</tem>
CSS variables
--#{$prefix}autocomplete-label-max-width: #{$autocomplete-label-max-width};
--#{$prefix}autocomplete-label-active-transform: #{$autocomplete-label-active-transform};
--#{$prefix}autocomplete-label-color: #{$autocomplete-label-color};
--#{$prefix}form-outline-select-notch-border-color: #{$form-outline-select-notch-border-color};
--#{$prefix}autocomplete-input-focused-color: #{$autocomplete-input-focused-color};
--#{$prefix}autocomplete-dropdown-container-zindex: #{$autocomplete-dropdown-container-zindex};
--#{$prefix}autocomplete-dropdown-background-color: #{$autocomplete-dropdown-background-color};
--#{$prefix}autocomplete-dropdown-box-shadow: #{$autocomplete-dropdown-box-shadow};
--#{$prefix}autocomplete-dropdown-margin: #{$autocomplete-dropdown-margin};
--#{$prefix}autocomplete-dropdown-transform: #{$autocomplete-dropdown-transform};
--#{$prefix}autocomplete-dropdown-transition: #{$autocomplete-dropdown-transition};
--#{$prefix}autocomplete-dropdown-open-transform: #{$autocomplete-dropdown-open-transform};
--#{$prefix}autocomplete-item-color: #{$autocomplete-item-color};
--#{$prefix}autocomplete-item-padding: #{$autocomplete-item-padding};
--#{$prefix}autocomplete-item-font-size: #{$autocomplete-item-font-size};
--#{$prefix}autocomplete-item-font-weight: #{$autocomplete-item-font-weight};
--#{$prefix}autocomplete-item-hover-background-color: #{$autocomplete-item-hover-background-color};
--#{$prefix}autocomplete-item-disabled-color: #{$autocomplete-item-disabled-color};
SCSS variables
$autocomplete-dropdown-container-zindex: 1065;
$autocomplete-label-max-width: 80%;
$autocomplete-label-active-transform: translateY(-1rem) translateY(0.1rem) scale(0.8);
$autocomplete-input-focused-color: #616161;
$autocomplete-label-color: $primary;
$autocomplete-dropdown-background-color: #fff;
$autocomplete-dropdown-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
$autocomplete-dropdown-margin: 0;
$autocomplete-dropdown-transform: scaleY(0.8);
$autocomplete-dropdown-transition: all 0.2s;
$autocomplete-dropdown-open-transform: scaleY(1);
$autocomplete-item-color: rgba(0, 0, 0, 0.87);
$autocomplete-item-padding: 6.5px 16px;
$autocomplete-item-font-size: 1rem;
$autocomplete-item-font-weight: 400;
$autocomplete-item-hover-background-color: #ddd;
$autocomplete-item-disabled-color: #9e9e9e;