有没有办法让HTML5数据列表使用模糊搜索？

<input type="text" list="options" id="searchInput">
<datalist id="options">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
  <option value="Durian">
  <option value="Grape">
  <option value="Lemon">
  <option value="Orange">
</datalist>

const searchInput = document.getElementById('searchInput');
const options = document.getElementById('options').options;

searchInput.addEventListener('input', function() {
  const searchValue = this.value.toLowerCase();

  for (let i = 0; i < options.length; i++) {
    const optionValue = options[i].value.toLowerCase();

    if (optionValue.indexOf(searchValue) !== -1) {
      options[i].setAttribute('data-display', 'true');
    } else {
      options[i].removeAttribute('data-display');
    }
  }
});

datalist option:not([data-display="true"]) {
  display: none;
}