Autocomplete clear button

xxxxxxxxxx
 
<div id="basic" class="form-outline" data-mdb-input-init>
  <input type="text" id="form11" class="form-control form-icon-trailing" />
  <label class="form-label" for="form1">Example label</label>
  <span class="trailing pe-auto clear d-none" tabindex="0">✕</span>
</div>

xxxxxxxxxx
 
.trailing.clear {
  cursor: pointer;
  z-index: 999;
​
  &:focus {
    color: #3b71ca;
    outline: none;
  }
}

xxxxxxxxxx
 
const basicAutocomplete = document.querySelector('#basic');
const form11 = document.querySelector("#form11");
const clearButton = document.querySelector('.trailing.clear');
const data = ['One', 'Two', 'Three', 'Four', 'Five'];
​
const dataFilter = (value) => {
  return data.filter((item) => {
    return item.toLowerCase().startsWith(value.toLowerCase());
  });
};
​
const autocomplete = new mdb.Autocomplete(basicAutocomplete, {
  filter: dataFilter
});
​
const showElement = (element) => {
  if (element.classList.contains('d-none')) {
    element.classList.remove('d-none');
  }
}
​
const hideElement = (element) => {
  if (!element.classList.contains('d-none')) {
    element.classList.add('d-none');
  }
}
​
const clearInput = (button) => {
  const evt = document.createEvent("HTMLEvents");
  evt.initEvent("blur", false, true);
​
  const input = button.parentNode.querySelector(".form-icon-trailing");
    input.value = null;
    input.dispatchEvent(evt);
    autocomplete.search("")
    hideElement(button);
}
​
clearButton.addEventListener('click', () => clearInput(clearButton));
clearButton.addEventListener('keydown', (event) => {
  if (event.code === "Enter") {
    event.preventDefault();
    clearButton.click();
  }
});
​
​
form11.addEventListener('input', () => {
  if (form11.value !== null) {
    showElement(clearButton);
  }
});
​
basicAutocomplete.addEventListener('itemSelect.mdb.autocomplete', () => {
  if (form11.value !== null) {
    showElement(clearButton);
  }
});
​

Console errors: 0