如何从ul中搜索文本并实时显示结果？

<input type="text" id="searchInput" placeholder="搜索">
<ul id="list">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>葡萄</li>
</ul>

const searchInput = document.getElementById('searchInput');
const list = document.getElementById('list').getElementsByTagName('li');

searchInput.addEventListener('input', search);

function search() {
  const searchText = searchInput.value.toLowerCase();

  for (let i = 0; i < list.length; i++) {
    const itemText = list[i].textContent.toLowerCase();

    if (itemText.indexOf(searchText) !== -1) {
      list[i].style.display = 'block';
    } else {
      list[i].style.display = 'none';
    }
  }
}