Topic: No "form-control" like styling to autocomplete component on dynamic append

Jordan Mack pro asked 2 years ago


Expected behavior

Autocomplete component shows as it does in the docs AND I am able to change the filter on the instance to something else.

The image below is when I use new mdb.Input(formOutline).init()

enter image description here

Actual behavior

enter image description here

Here I am using: new mdb.Autocomplete(formOutline, { filter: () => [] });. Here I cannot specify the actual options as they are dependant on the data in the td beside it (the options are set on a different event)

Resources (screenshots, code snippets etc.)

If I init the autocompletes as shown in the snippet below:

// init form outlines when appended
$(document).on('formOutlineAppend', function() {

    document.querySelectorAll('.form-outline').forEach((formOutline) => {
        new mdb.Autocomplete(formOutline, {
            filter: () => [],
        });
    });

});

The autocomplete shows like:

enter image description here

but I would still like to change this filter to different values in later code:

console.log(node);
// Output (Node, not string):
// <div class="rateCell form-outline" id="fo_95QMV">
//   <input class="form-control rateInput" type="text" id="ri_95QMV">
//   <label class="form-label" for="ri_95QMV">Enter Rate..</label>
// </div>

// change the data in the option
let inst = mdb.Autocomplete.getInstance(node);

console.log(inst);
// Output: null

inst.dispose();

// TypeError: Cannot read properties of null (reading 'dispose')
// at appendRates (update-sub-project:617:7)
// at addEmployeeRow (update-sub-project:696:3)
// at update-sub-project:871:6
// at Array.forEach (<anonymous>)
// at fillForm (update-sub-project:870:24)
// at fetchSubproject (update-sub-project:487:2)

let dataFilter = (value) => fetchedData.filter(obj => obj.startsWith(value));
new mdb.Autocomplete(node, {
    filter: dataFilter,
});

Another question is with Autocompletes getOrCreateInstance() method, where do I specify the options if it is to create a new instance? how do I change the options on an existing instance?

I have created a snippet, where I can solve the appending new options problem (is there a nicer way to do this?) but the styling problem still exists.

https://mdbootstrap.com/snippets/standard/jps_mack/3689274


Michał Duszak staff answered 2 years ago


To fix your styling issues, you must initialize Input itself also - simply add code below after you initialize Autocomplete.

document.querySelectorAll('.form-outline').forEach((formOutline) => {
    new mdb.Input(formOutline).init();
  });

Here is the snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3692017

According to the question about getOrCreateInstance() method - as a second argument it takes an object with options (config). If an instance is already existing, this method will return the instance without updating the config. As Autocomplete doesn't have an update() method you have to do it as you do it now - dispose and then create a new instance with new config.



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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: Intel
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: Yes
  • Provided link: Yes