Topic: How to get the autocomplete selected value
When itemSelect.mdb.autocomplete is fired, I expect to get the selected value, or that the text box is updated, so i can get the selected value from there.
I receive an object without the selected value and the text box value contains what I typted, not what I selected.
https://mdbootstrap.com/snippets/standard/denre/3250610
MicroFluid answered 3 years ago
Hi Denre, I'm running into the same problem. Could you give an explanation on how to read this object? I'm at a loss as to how to get the information once it has been selected.
I would like to dynamically change the form based on the input from the autocomplete box.
-- edit --
I also eventually figured this one out - or at least I figured out something that will work for me. The key is that you can capture the mdb.Autocomplete object here:
const autocomplete = new mdb.Autocomplete(basicAutocomplete, {
filter: dataFilter,
});
and then trigger on an event listener here to get another field to dynamically change based on the input from the auto-selector:
basicAutocomplete.addEventListener('itemSelect.mdb.autocomplete', (e) => {
for (i in subjects) {
if (subjects[i].name == autocomplete._filteredResults[0]) {
modalBodySubjectID.value = subjects[i].id;
}
}
})
Michał Duszak staff commented 3 years ago
Hello, this approach should be sufficient. Does this work fine for you?
carlivs pro premium priority answered a year ago
Here is a more efficient solution:
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
});
basicAutocomplete.addEventListener('itemSelect.mdb.autocomplete', (e) => {
console.log(e.value);
});
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: laptop
- Browser: firefox
- OS: windows 10
- Provided sample code: No
- Provided link: Yes
Denre pro premium priority commented 3 years ago
My apologies, the value is returned as an object.