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.



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: 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