如何在html的搜索栏中搜索json文件？

<form id="search-form">
  <input type="text" id="search-input" placeholder="输入关键词">
  <input type="submit" value="搜索">
</form>

document.getElementById("search-form").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  var keyword = document.getElementById("search-input").value;
  searchJSON(keyword);
});

function searchJSON(keyword) {
  var url = "http://example.com/path/to/json/file.json"; // 替换为你的JSON文件的URL

  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var jsonData = JSON.parse(xhr.responseText);
      var searchResults = filterJSON(jsonData, keyword);
      displayResults(searchResults);
    }
  };
  xhr.send();
}

function filterJSON(jsonData, keyword) {
  var results = [];

  // 在JSON数据中搜索匹配的项
  for (var i = 0; i < jsonData.length; i++) {
    var item = jsonData[i];
    if (item.name.toLowerCase().includes(keyword.toLowerCase())) {
      results.push(item);
    }
  }

  return results;
}

function displayResults(results) {
  var resultList = document.getElementById("result-list");
  resultList.innerHTML = ""; // 清空之前的结果

  // 将搜索结果添加到页面上
  for (var i = 0; i < results.length; i++) {
    var resultItem = document.createElement("li");
    resultItem.textContent = results[i].name;
    resultList.appendChild(resultItem);
  }
}