纯JavaScript实现子串匹配的IDE风格自动补全功能优化求助

原代码无法实现子串匹配，大概率是仅做了前缀匹配（比如用startsWith()），而非检查字符串中是否包含目标子串。下面是优化后的原生JavaScript实现，支持子串匹配、大小写忽略、结果排序（前缀匹配优先），完全贴合IDE式自动补全的使用习惯：

核心实现代码 #

// 模拟词条数据源
const autocompleteItems = [
  'JavaScript',
  'TypeScript',
  'React',
  'Vue',
  'Angular',
  'Node.js',
  'Express',
  'HTML',
  'CSS',
  'Tailwind CSS'
];

// 自动补全核心匹配与排序函数
function getAutocompleteResults(inputText) {
  if (!inputText.trim()) return [];
  
  const lowerInput = inputText.toLowerCase();
  return autocompleteItems
    .filter(item => item.toLowerCase().includes(lowerInput))
    .sort((a, b) => {
      const aLower = a.toLowerCase();
      const bLower = b.toLowerCase();
      // 前缀匹配的项优先排在前面
      const aIsPrefix = aLower.startsWith(lowerInput);
      const bIsPrefix = bLower.startsWith(lowerInput);
      if (aIsPrefix && !bIsPrefix) return -1;
      if (!aIsPrefix && bIsPrefix) return 1;
      // 前缀相同则按字母序排序
      return aLower.localeCompare(bLower);
    });
}

// 输入框交互逻辑
const input = document.getElementById('autocomplete-input');
const resultsContainer = document.getElementById('autocomplete-results');

input.addEventListener('input', () => {
  const results = getAutocompleteResults(input.value);
  // 清空并渲染结果列表
  resultsContainer.innerHTML = '';
  results.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    // 点击选中项填充输入框
    li.addEventListener('click', () => {
      input.value = item;
      resultsContainer.innerHTML = '';
    });
    resultsContainer.appendChild(li);
  });
});

关键优化点 #

• 子串匹配：用includes()替代前缀匹配逻辑，确保只要词条包含输入子串就会被筛选出来
• 大小写兼容：统一将输入和词条转为小写后比较，避免大小写敏感导致的漏匹配
• 结果排序：前缀匹配的词条优先展示，剩余项按字母序排序，符合IDE补全的用户预期
• 原生实现：完全基于原生JavaScript和DOM API，无第三方库依赖

配套HTML结构与样式 #

<div class="autocomplete-container">
  <input type="text" id="autocomplete-input" placeholder="输入关键词...">
  <ul id="autocomplete-results"></ul>
</div>

<style>
.autocomplete-container {
  position: relative;
  width: 300px;
}
#autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-top: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: white;
  max-height: 200px;
  overflow-y: auto;
}
#autocomplete-results li {
  padding: 8px 12px;
  cursor: pointer;
}
#autocomplete-results li:hover {
  background-color: #f0f0f0;
}
</style>

内容的提问来源于stack exchange，提问作者Abhinav Patel