Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Autocomplete with API return error when click outside without value

METOURNEAU free asked 3 years ago


Click in and then out the search input whithout writing anything generate error : Uncaught TypeError: Cannot read properties of null (reading 'classList').

const asyncAutocomplete = document.querySelector('#autocomplete');
const asyncFilter = async (query) => {
    if(query == ""){
      return [];
    }
    const url = url + `${encodeURI(query)}`;
    const response = await fetch(url);
    const data = await response.json();
    return data;
  };

  new mdb.Autocomplete(asyncAutocomplete, {
    filter: asyncFilter,
    displayValue: (value) => value.val,
    noResults: "No result"
  });

  asyncAutocomplete.addEventListener('itemSelect.mdb.autocomplete', (e) => {
    //select value
  })

Thanks


Dawid Wajszczuk staff commented 3 years ago

Hi. Can you recreate this error in a snippet https://mdbootstrap.com/support/? Because in mine everything looks fine https://mdbootstrap.com/snippets/standard/d-wajszczuk/3511184#js-tab-view.


METOURNEAU free commented 3 years ago

My bad, I forget the label in the form-outline. Thanks for support



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: computer
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No