js怎么实现搜索框提示 js搜索框提示功能的4步实现流程

const searchInput = document.getElementById('search-input'); // 假设你的搜索框id是search-input
const suggestionList = document.getElementById('suggestion-list'); // 假设你的下拉列表id是suggestion-list

searchInput.addEventListener('input', function(event) {
  const inputValue = event.target.value;
  // 这里可以添加防抖动，避免频繁请求服务器
  getSuggestions(inputValue);
});

function getSuggestions(query) {
  // 防抖动函数
  debounce(function() {
    if (query.trim() === '') {
      suggestionList.innerHTML = ''; // 清空提示
      return;
    }

    fetch(`/api/suggestions?q=${query}`) // 假设你的API接口是/api/suggestions
      .then(response => response.json())
      .then(data => {
        renderSuggestions(data);
      })
      .catch(error => {
        console.error('Error fetching suggestions:', error);
      });
  }, 300)(); // 300毫秒防抖动
}

function debounce(func, delay) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, delay);
  }
}

function renderSuggestions(suggestions) {
  suggestionList.innerHTML = ''; // 清空之前的提示

  if (suggestions && suggestions.length > 0) {
    suggestions.forEach(suggestion => {
      const listItem = document.createElement('li');
      listItem.textContent = suggestion; // 假设服务器返回的是一个字符串数组
      listItem.addEventListener('click', function() {
        searchInput.value = suggestion; // 点击提示，将提示内容填充到搜索框
        suggestionList.innerHTML = ''; // 清空提示
      });
      suggestionList.appendChild(listItem);
    });
  }
}

#suggestion-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  position: absolute; /* 绝对定位，使其位于搜索框下方 */
  width: 100%;
  background-color: white;
  z-index: 1; /* 确保显示在搜索框上方 */
}

#suggestion-list li {
  padding: 5px 10px;
  cursor: pointer;
}

#suggestion-list li:hover {
  background-color: #f0f0f0;
}