Topic: ReferenceError: mdb is not defined

Kirsten Andersen Morris premium asked 4 months ago


Expected behavior I am attempting to make the autocomplete component work. I have the autocomplete box showing and can enter into it, but no dropdown options are appearing. I am getting the uncaught ReferenceError: mdb is not defined. I'm building with django/python.

Resources (screenshots, code snippets etc.)

I believe I've made an error in adding mdb to my project, but I haven't been able to resolve it. Here is what I have.

<!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/> <!-- Google Fonts Roboto --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" /> <!-- MDB --> <link rel="stylesheet" href="{% static 'css/mdb.min.css' %}" /> <!-- MDB --> <script type="text/javascript" src="{% static 'js/mdb.min.js' %}"></script>


Kirsten Andersen Morris premium answered 4 months ago


No, I have the MDB script at the bottom, just like in the index.html file. The only change I made was adding the django static code. I also tried putting the autocomplete into the index.html body and it still didn't work.

html:

<div id="customItem" class="form-outline mx-5 mb-2" data-mdb-list-height="290">
        <input type="text" id="form14" class="form-control" />
        <label class="form-label" for="form1">Find Item</label>
    </div>

script:

<script type="text/javascript">
const customItemAutocomplete = document.querySelector('#customItem');
const data = [
{ title: 'One', subtitle: 'Secondary text' },
{ title: 'Two', subtitle: 'Secondary text' },
{ title: 'Three', subtitle: 'Secondary text' },
{ title: 'Four', subtitle: 'Secondary text' },
{ title: 'Five', subtitle: 'Secondary text' },
{ title: 'Six', subtitle: 'Secondary text' },
];
const dataFilter = (value) => {
return data.filter((item) => {
    return item.title.toLowerCase().startsWith(value.toLowerCase());
});
};

new mdb.Autocomplete(customItem, {
filter: dataFilter,
displayValue: (value) => value.title,
itemContent: (result) => {
    return `
    <div class="autocomplete-custom-item-content">
        <div class="autocomplete-custom-item-title">${result.title}</div>
        <div class="autocomplete-custom-item-subtitle">${result.subtitle}</div>
    </div>
    `;
},
});

I'm getting the box and it is responsive but no autocomplete suggestions show up when typing.


kpienkowska staff answered 4 months ago


Your code copied to snippet works well. https://mdbootstrap.com/snippets/standard/kpienkowska/4201140 So there is no problem with implementation. There must be something wrong with the way you link our package. You either used the wrong syntax or you declared the wrong path to the file. Maybe consult this Stack Overflow thread for more information: https://stackoverflow.com/questions/40292179/best-practice-for-including-custom-javascript-in-django


kpienkowska staff answered 4 months ago


I am guessing that you have our package linked with font and icon packages in the head of your HTML file. You need to link the mdb package at the end of body in your HTML file. An example is shown in index.htm file in the package.


Kirsten Andersen Morris premium commented 4 months ago

The script isn't in the head, the only changes I made to the index.html is adding the static django code. Please see my above comment.



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

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.3.0
  • Device: iMac Pro
  • Browser: Chrome
  • OS: iOS
  • Provided sample code: No
  • Provided link: No