<input type="text" id="autocomplete" list="suggestions">
<datalist id="suggestions">
  <!-- 选项会在JavaScript中动态添加 -->
</datalist>

<script>
const input = document.getElementById('autocomplete');
const datalist = document.getElementById('suggestions');
const suggestions = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

input.addEventListener('input', function(e) {
  const value = e.target.value.toLowerCase();
  datalist.innerHTML = '';
  
  if (value.length > 0) {
    const matches = suggestions.filter(item => 
      item.toLowerCase().startsWith(value)
    );
    
    matches.forEach(match => {
      const option = document.createElement('option');
      option.value = match;
      datalist.appendChild(option);
    });
  }
});

// 添加TAB键补全功能
input.addEventListener('keydown', function(e) {
  if (e.key === 'Tab' && datalist.options.length > 0) {
    e.preventDefault();
    input.value = datalist.options[0].value;
  }
});
</script>

<input type="text" id="ajax-autocomplete">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#ajax-autocomplete').on('input', function() {
  const query = $(this).val();
  
  if (query.length > 1) {
    $.ajax({
      url: '/api/autocomplete',
      data: { q: query },
      success: function(data) {
        // 假设返回的是JSON数组
        showSuggestions(data);
      }
    });
  }
});

function showSuggestions(items) {
  // 实现显示建议列表的逻辑
  // 可以使用类似前端实现的datalist或自定义UI
}
</script>

// 防抖实现
let timer;
$('#ajax-autocomplete').on('input', function() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    const query = $(this).val();
    if (query.length > 1) {
      // 发送Ajax请求
    }
  }, 300); // 300毫秒延迟
});