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()
Actual behavior
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:
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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