Request: Autocomplete, Vanilla Javascript - force update


Topic: Request: Autocomplete, Vanilla Javascript - force update

softcon premium asked 1 year ago

Requested change to Autocomplete component.

Expected behavior When using Autocomplete component, I want user to specify how the result is filtered (ie. matching patterns) via a dropdown. User should be able to select from dropdown and then enter text for autocomplete OR enter text for autocomplete and THEN select filter from dropdown and have autocomplete reload the results again. The filter is implemented using the "filter" parameter in the mdb.Autocomplete options.

Actual behavior Autocomplete does not reload results when a filter dropdown has been changed. It only ever updates when user manually changes the autocomplete textfield. There is no other built-in way to force the autocomplete to refresh.

A hacky workaround is to use Javascript, on filter dropdown change change the value of autocomplete textfield value to something else (I added a space to the end of the text), then focus on it (forcing an reload of autocomplete results), and then blur off again and then put the value back as it was originally and then force a second focus() to force the autocomplete to reload again:

AutoCompleteObject.close();    
document.getElementById('search-field').value += " ";  //force textfield value to be different
document.getElementById('search-field').focus();   //forces a refresh, but with unwanted change to textfield
document.getElementById('search-field').blur();
document.getElementById('search-field').value = document.getElementById('search-field').value.slice(0, -1);  //put textfield back as it was
document.getElementById('search-field').focus();  //forces a refresh of the desired textfield, because the component now recognises a change has been made

...but this is messy! What would be MUCH better is an additional Method (like open, close, dispose) called "update" which forces a refresh of the data. We could then call this method to force the autocomplete to refresh it's data without the textfield data having changed.

Resources (screenshots, code snippets etc.)


Dawid Wajszczuk staff answered 1 year ago

FREE CONSULTATION

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

Status

Closed

Specification of the issue
  • User: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: Pc
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No