Topic: Auto complete widget not working in dynamic templates
mortgagekart priority asked 18 hours 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.)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- 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