在Javascript中使用来自数据库的数据创建自动完成下拉列表

// 前端代码
const input = document.getElementById('input'); // 输入框元素
const dropdown = document.getElementById('dropdown'); // 下拉列表元素

input.addEventListener('input', function() {
  const keyword = input.value; // 获取用户输入的关键字

  // 发送Ajax请求，获取数据库数据
  fetch('/api/data', {
    method: 'POST',
    body: JSON.stringify({ keyword }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    const matches = data.filter(item => item.includes(keyword)); // 筛选匹配的项

    // 生成下拉列表
    dropdown.innerHTML = '';
    matches.forEach(match => {
      const option = document.createElement('option');
      option.textContent = match;
      dropdown.appendChild(option);
    });
  });
});

dropdown.addEventListener('click', function() {
  input.value = dropdown.value; // 将选中的值填充到输入框中
});