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>


Mateusz Lazaru staff answered 2 years ago


You used MDB5 code, here is documentation for MDB 4 package.



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

  • ForumUser: Priority
  • 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