Topic: How to get the autocomplete selected value

Denre priority asked 2 years ago

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.

Denre priority commented 2 years ago

My apologies, the value is returned as an object.

carlivs priority answered 10 months 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) => {

MicroFluid free answered 2 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 2 years ago

Hello, this approach should be sufficient. Does this work fine for you?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • 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