Autocomplete testprogram not working

Topic: Autocomplete testprogram not working

Jan Ivar priority asked 2 years ago

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>

Add comment

Mateusz Lazaru staff answered 2 years ago