如何使用Javascript和HTML从搜索栏获取输入并同时处理搜索列表？

<input type="text" id="searchInput" placeholder="输入搜索内容">
<ul id="searchList"></ul>

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

searchInput.addEventListener('input', handleSearch);

function handleSearch() {
  const inputValue = searchInput.value.trim(); // 获取搜索栏的输入值并去除首尾空格

  // 清空搜索列表
  searchList.innerHTML = '';

  // 根据输入值进行搜索并更新搜索列表
  if (inputValue !== '') {
    const searchResults = getSearchResults(inputValue); // 根据输入值获取搜索结果

    // 遍历搜索结果，创建列表项并添加到搜索列表中
    searchResults.forEach(result => {
      const listItem = document.createElement('li');
      listItem.textContent = result;
      searchList.appendChild(listItem);
    });
  }
}

function getSearchResults(inputValue) {
  // 根据输入值进行搜索并返回搜索结果
  // 这里只是一个示例，实际应用中可以根据需求进行自定义
  const results = ['搜索结果1', '搜索结果2', '搜索结果3'];
  return results.filter(result => result.includes(inputValue));
}