Topic: Auto complete widget not working in dynamic templates
mortgagekart priority asked 1 week ago
Hi ,
We are using MDB bootstrap-mdb/plugins/js/all.min.js and bootstrap-mdb/js/mdb.umd.min.js. If we use auto-complete in static pages it works very well.
We're using dynamic templates to render the contents so we manually init the component via javascript. In the version 7.0.0 auto-complete widget on search not showing the data list. The following code snippet is the ref. for how we init the components using js
Init function:
function init_auto_complete(){
const autocomplete = document.querySelectorAll('[data-mdb-input-init]');
autocomplete.forEach((autocomplete) => {
new mdb.Autocomplete.getOrCreateInstance(autocomplete)
});
}
HTML with filter js
<div id="auto-select" class="form-outline autocomplete" data-mdb-input-init>
<input type="text" id="form2" class="form-control" />
<label class="form-label" for="form2">Example label</label>
</div>
<script>const basicAutocomplete1 = document.querySelector('#auto-select');
const data1 = ['One', 'Two', 'Three'];
const dataFilter1 = (value) => {
return data1.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
new mdb.Autocomplete(basicAutocomplete1, {
filter: dataFilter1
});</script>
Actual behavior On focus or on typing the text list of data shown in the panel below the input widget.
Resources (screenshots, code snippets etc.)
Kamila Pieńkowska staff answered 1 week ago
You also need to provide a filter function in your asynchronously added autocomplete. You did it well for a static example.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.0.0
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: No