Topic: AutoComplete - 60% working.
I have tried to modify the autocomplete example. The Fetch request seems like it is working, but autocomplete does not fill in.
If I just run the server code I get a response that starts like this:
[{"GroupID":"25952","GroupName":"Andover Jersey Knits"},{"GroupID":"25587","GroupName":"Andover Solids"},{"GroupID":"26740","GroupName":"Bird Humbug by Andover Knits"}]
However, in the browser's form, it does not make suggestions.
On the client side, it just spins, no autocomplete.
The code on the client side is as follows:
<body>
<!-- Start your project here-->
<div class="container">
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
<div id="async" class="form-outline autocomplete">
<input type="text" id="GroupName" class="form-control" />
<label class="form-label" for="GroupName">Example label</label>
</div>
</div>
</div>
<!-- End your project here-->
</body>
<!-- MDB ESSENTIAL -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- MDB PLUGINS -->
<script type="text/javascript" src="plugins/js/all.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
<script>
const asyncAutocomplete = document.querySelector('#async');
const asyncFilter = async (query) => {
const url = `autocomplete-ClubItem.php?q=${encodeURI(query)}`;
const response = await fetch(url);
const data = await response.json();
return data.results;
};
new mdb.Autocomplete(asyncAutocomplete, {
filter: asyncFilter,
displayValue: (value) => value.GroupName
});
</script>
</html>
The error I'm seeing is:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
at $_._updateResults (index.js:319:14)
at index.js:279:12
_updateResults @ index.js:319
(anonymous) @ index.js:279
Promise.then (async)
_asyncUpdateResults @ index.js:278
_filterResults @ index.js:264
_handleInputFocus @ index.js:205
e @ event-handler.js:102
I must be doing something wrong, but can't find it! Thanks.
Solved:
The issue seems to be that the return from the ajax started
[{"GroupID":"25952","GroupName":"....
And what it needed was to be prefaced like this:
{"results":[{"GroupID":"25587","GroupName"
Adding that (and a closing curly bracket) solved the problem and the code works as expected.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.2
- Device: Computer
- Browser: Chrome
- OS: Win10
- Provided sample code: No
- Provided link: No