Request: Autocomplete, Vanilla Javascript - force update

Topic: Request: Autocomplete, Vanilla Javascript - force update

softcon pro premium asked 4 years 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 commented 4 years ago

Could you please provide a snippet of what you would like to accomplish?

softcon pro premium commented 4 years ago

Sorry for the delay:https://mdbootstrap.com/snippets/standard/softcon/3002671#js-tab-view

Here is an async autocomplete example with the ability to change the order. But changing the order requires a second ajax request + processing, and to force a focus on the textfield again. But often, the previously returned data just needing reordering. And forcing the focus seems hacky.

Ideal solution - have an ordering / filtering system integrated in main autocomplete component, rather than requiring hacky amends. User could specify the ordering/filtering parameters, whether or not the data needs to be re-requested via ajax, and whether to immediately re-display the list as soon as order/filter is changed.

Add comment

Dawid Wajszczuk staff answered 4 years ago