Topic: Autocomplete HTML issues

jolurono premium asked 2 years ago


Expected behavior Autocomplete should work with HTML and min.js

Actual behavior Not working

Resources (screenshots, code snippets etc.) Material Design for Bootstrap

<br>
<div class="container-fluid">

<div id="basic" class="form-outline">
  <input type="text" id="form11" class="form-control" />
  <label class="form-label" for="form1">Example label</label>
</div>

</div>

<!-- End your project here-->

<!-- MDB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.0.0/mdb.min.js" integrity="sha512-7HDUKBIUa1tykYCUINFix0eJNScy99DDTEVb+Hy6V82NtrnOaMYK0nf2HA2NFRXLv9CL5BnlXdu9rFvK9cms6A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Custom scripts -->
<script type="text/javascript">

  const basicAutocomplete = document.querySelector('#basic');
  const data = ['One', 'Two', 'Three', 'Four', 'Five'];
  const dataFilter = (value) => {
    return data.filter((item) => {
      return item.toLowerCase().startsWith(value.toLowerCase());
    });
  };

  new mdb.Autocomplete(basicAutocomplete, {
    filter: dataFilter
  });

</script>


jolurono premium answered 2 years ago


I am coding in Google apps script, so not sure if I can import libraries, can you please elaborate more?


Michał Duszak staff commented 2 years ago

Unfortunately we have not tried to do this integration. This should be done on your own.


holstyboy pro commented 2 years ago

hi, i am on google apps script as well... needed to put the .js on a webserver to read it in like a regular CDN reference.


jolurono premium commented 2 years ago

Thanks for your response. I thought about it but in my case it defeats the purpose of a serverless service


Michał Duszak staff answered 2 years ago


The code you provided provides the script file (mdb.min.js) for the free version. Autocomplete is a pro feature. Here are the docs for installing MDB Pro: https://mdbootstrap.com/docs/standard/pro/installation/



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: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: iPhone
  • Browser: Safari
  • OS: IOS
  • Provided sample code: No
  • Provided link: No