How to get the autocomplete selected value


Topic: How to get the autocomplete selected value

Denre pro premium priority asked 3 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.

https://mdbootstrap.com/snippets/standard/denre/3250610


Denre pro premium priority commented 3 years ago

My apologies, the value is returned as an object.


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);
});

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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