JS实现模糊查询带下拉匹配效果查询地址

好的，我可以为您提供一个实现模糊查询带下拉匹配效果查询地址的 JavaScript 代码段。代码如下：

<!-- HTML代码 -->
<div>
  <input placeholder="请输入地址" id="address-input">
  <div id="address-suggestions"></div>
</div>

/* CSS代码 */
#address-suggestions {
  position: absolute;
  width: 100%;
  max-height: 200px;
  overflow: auto;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 2;
}
#address-suggestions li {
  padding: 5px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
#address-suggestions li:hover {
  background-color: #f5f5f5;
}

// JavaScript代码
const addressInput = document.querySelector('#address-input');
const addressSuggestions = document.querySelector('#address-suggestions');

addressInput.addEventListener('input', () => {
  const keyword = addressInput.value.trim();
  if (keyword === '') {
    addressSuggestions.innerHTML = '';
    return;
  }

  // 发送请求，获取地址列表
  fetch(`/api/address?q=${keyword}`)
    .then(response => response.json())
    .then(addresses => {
      if (addresses.length === 0) {
        addressSuggestions.innerHTML = '';
        return;
      }

      // 渲染地址列表
      const addressItems = addresses.map(address =>
        `<li>${address}</li>`
      ).join('');
      addressSuggestions.innerHTML = `<ul>${addressItems}</ul>`;

      // 选择地址
      const addressList = addressSuggestions.querySelector('ul');
      addressList.addEventListener('click', event => {
        const selectedAddress = event.target.innerText;
        addressInput.value = selectedAddress;
        addressSuggestions.innerHTML = '';
      });
    })
    .catch(error => {
      console.error(error);
    });
});

// 点击空白处隐藏地址列表
document.addEventListener('click', event => {
  if (!event.target.matches('#address-input')) {
    addressSuggestions.innerHTML = '';
  }
});

上述代码中，我们使用了 fetch 方法发送请求，获取地址列表，并使用 innerHTML 渲染了地址列表。当用户点击地址列表中的某个地址时，我们将其设置为输入框的值。

为了防止用户输入的关键词不匹配，我们在输入框的 input 事件中添加了一个 trim 操作，将输入的内容两端的空白字符去除。同时，我们还添加了点击空白处隐藏地址列表的功能，以提高用户体验。