Topic: AutoComplete - 60% working.

IAA_73 priority asked 9 months ago


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.


IAA_73 priority answered 9 months ago


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

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