当数组类型为JSON时如何实现自定义搜索栏

<input type="text" id="searchInput" placeholder="请输入搜索关键字">

<ul id="searchResults"></ul>

<script>
  const data = [
    { name: "Apple", category: "Fruit" },
    { name: "Banana", category: "Fruit" },
    { name: "Carrot", category: "Vegetable" },
    { name: "Tomato", category: "Vegetable" }
  ];

  const searchInput = document.getElementById("searchInput");
  const searchResults = document.getElementById("searchResults");

  searchInput.addEventListener("input", function() {
    const keyword = searchInput.value.toLowerCase();

    const results = data.filter(function(item) {
      return item.name.toLowerCase().indexOf(keyword) !== -1;
    });

    renderResults(results);
  });

  function renderResults(results) {
    searchResults.innerHTML = "";

    results.forEach(function(item) {
      const li = document.createElement("li");
      li.textContent = item.name;
      searchResults.appendChild(li);
    });
  }
</script>