Topic: Autocomplete testprogram not working
Expected behavior Autocomplete to work Actual behavior Not working and an error message
Uncaught ReferenceError: mdb is not defined
Resources (screenshots, code snippets etc.) Bought MDB We are using bootstrap 4, got link to this repositories:
MDB / JQUERY / MDB4 / MDB4 JQUERY UI KIT PRO ESSENTIAL
MDB / STANDARD / MDB UI KIT PRO ESSENTIAL
MDB / TUTORIALS / MDB5 PRO TUTORIALS
MDB / JQUERY / JQ PRO
Download and created a test program, not working. Please can anyone help us.
Testprogram snippet from MDB doc:
<script src="scripts/mdb-4.20.0/js/jquery.min.js"></script>
<script src="scripts/mdb-4.20.0/js/bootstrap.min.js"></script>
<script src="scripts/mdb-4.20.0/js/mdb.min.js"></script>
<script>
/*
window.addEventListener('DOMContentLoaded', (event) => {
const asyncAutocomplete = document.querySelector('#search-person');
const asyncFilter = async (query) => {
const url = 'ajax_search_persons.php?term=${ encodeURI(query) }';
const response = await fetch(url);
const data = await response.json();
console.log(data.results);
return data.results;
};
new mdb.Autocomplete(asyncAutocomplete, {
filter: asyncFilter,
displayValue: (value) => value.firstname
});
});*/
const asyncAutocomplete = document.querySelector('#async');
const asyncFilter = async (query) => {
const url = `https://swapi.py4e.com/api/people/?search=${encodeURI(query)}`;
const response = await fetch(url);
const data = await response.json();
return data.results;
};
new mdb.Autocomplete(asyncAutocomplete, {
filter: asyncFilter,
displayValue: (value) => value.name
});
</script>
</head>
<body>
<div id="async" class="form-outline autocomplete">
<input type="text" id="form2" class="form-control" />
<label class="form-label" for="form2">Example label</label>
</div>
</body>
mlazaru staff answered 3 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 4.1.0
- Device: PC
- Browser: Firefox + all other
- OS: Linux
- Provided sample code: No
- Provided link: No