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
The filter option is required in order for component to work
properly. The option accepts a function that is expected to return an array of
results or a Promise that resolves to an array of results.
const basicAutocomplete = document.querySelector('#basic');
const data = ['One', 'Two', 'Three', 'Four', 'Five'];
const dataFilter = (value) => {
return data.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
new mdb.Autocomplete(basicAutocomplete, {
filter: dataFilter
});
The displayValue option allow to separate oryginal 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.
const displayValueAutocomplete = document.querySelector('#displayValue');
const data = [
{ title: 'One', description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit' },
{ title: 'Two', description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit' },
{ title: 'Three', description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit' },
{ title: 'Four', description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit' },
{ title: 'Five', description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit' }
];
const dataFilter = (value) => {
return data.filter((item) => {
return item.title.toLowerCase().startsWith(value.toLowerCase());
});
};
new mdb.Autocomplete(displayValueAutocomplete, {
filter: dataFilter,
displayValue: (value) => value.title,
});
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.
const asyncAutocomplete = document.querySelector('#async');
const asyncFilter = 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;
};
new mdb.Autocomplete(asyncAutocomplete, {
filter: asyncFilter,
displayValue: (value) => value.name
});
Use threshold option to specify a minimum number of the characters
in the input field needed to perform a search operation.
const thresholdAutocomplete = document.querySelector('#threshold');
const data = ['One', 'Two', 'Three', 'Four', 'Five'];
const dataFilter = (value) => {
return data.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
new mdb.Autocomplete(thresholdAutocomplete, {
filter: dataFilter,
threshold: 2
});
The itemContent option allow to display custom HTML in the result
list. You can use the listHeight option to modify the result list
height when you want to display more content in the component dropdown.
const customItemAutocomplete = document.querySelector('#customItem');
const data = [
{ 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 dataFilter = (value) => {
return data.filter((item) => {
return item.title.toLowerCase().startsWith(value.toLowerCase());
});
};
new mdb.Autocomplete(customItem, {
filter: dataFilter,
displayValue: (value) => value.title,
itemContent: (result) => {
return `
${result.title}
${result.subtitle}
`;
},
});
.autocomplete-custom-item-content {
display: flex;
flex-direction: column;
}
.autocomplete-custom-item-title {
font-weight: 500;
}
.autocomplete-custom-item-subtitle {
font-size: 0.8rem;
}
A custom content container with a class .autocomplete-custom-content will be displayed at the end of the autocomplete-custom-item-subtitle dropdown. You can use it to display a number of search results.
const customContentAutocomplete = document.querySelector('#customContent');
const data = ['One', 'Two', 'Three', 'Four', 'Five'];
const dataFilter = (value) => {
return data.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
new mdb.Autocomplete(customContent, {
filter: dataFilter,
customContent: `
`,
});
customContent.addEventListener('update.mdb.autocomplete', (event) => {
const resultsLength = event.results.length;
setTimeout(() => {
customContentContainer = document.querySelector('.autocomplete-custom-content');
customContentContainer.innerHTML = `Search results: ${resultsLength}`;
}, 0);
});
.autocomplete-custom-content {
padding: 6.5px 16px;
}
const validationAutocomplete = document.querySelector('#validation');
const data = ['One', 'Two', 'Three', 'Four', 'Five'];
const dataFilter = (value) => {
return data.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
new mdb.Autocomplete(validationAutocomplete, {
filter: dataFilter
});
var myAutocomplete = new mdb.Autocomplete(document.getElementById('myAutocomplete'), options)
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$('.example-class').autocomplete(options);
| Name | Type | Default | Description |
|---|---|---|---|
customContent
|
String | '' |
Custom HTML template that will be displayed at the end of the component dropdown |
debounce
|
Number | 300 |
Delay between search queries, improves the component performance |
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 |
noResults
|
Function | '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 |
| Name | Description | Example |
|---|---|---|
open |
Manually opens a component dropdown |
myAutocomplete.open()
|
close |
Manually closes a component dropdown |
myAutocomplete.close()
|
dispose
|
Disposes an autocomplete instance |
myAutocomplete.dispose()
|
var myAutocomplete = document.getElementById('myAutocomplete')
var autocomplete = new mdb.Autocomplete(myAutocomplete)
autocomplete.open()
| Name | Description |
|---|---|
open.mdb.autocomplete
|
This event fires immediately when the autocomplete dropdown is opened. |
close.mdb.autocomplete
|
This event fires immediately when the autocomplete dropdown is closed. |
itemSelect.mdb.autocomplete
|
This event fires immediately when the autocomplete item is selected. |
update.mdb.autocomplete
|
This event fires immediately when the autocomplete results list is updated. |
var myAutocomplete = document.getElementById('myAutocomplete')
myAutocomplete.addEventListener('open.mdb.autocomplete', function (e) {
// do something...
})
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import { Autocomplete } from 'mdb-ui-kit';