实现输入框高亮补全功能（Male/Female选项）求推荐库

推荐可用的库 #

下面几个成熟的库都能轻松实现你要的功能：

• Autocomplete.js：轻量级组件，支持自定义渲染高亮补全文本，完美适配“输入前缀+高亮后缀”的展示，还能响应Tab/点击完成补全。
• Select2：功能全面的下拉选择插件，支持输入过滤，通过自定义模板可以快速实现输入时的高亮补全提示，兼容性强。
• jQuery UI Autocomplete：经典自动补全组件，配置简单，支持自定义匹配逻辑和高亮效果，适合快速开发。

你的代码问题分析 #

你当前的代码逻辑存在三个核心问题：

1. 无高亮显示：直接把输入内容替换成完整的Male/Female，没有保留用户输入的前缀+高亮后缀的展示逻辑。
2. 强制自动补全：输入M/F后直接替换成完整值，没有做“建议提示”的处理，用户失去了自主输入的空间。
3. 无法删除内容：每次输入变化都会触发替换逻辑，删除后输入框内容改变又会被重新替换，形成循环导致无法正常修改。

原生JS简易实现方案 #

如果不想依赖第三方库，可以自己实现核心逻辑，示例代码如下：

<input type="text" id="genderInput" placeholder="输入性别（M/F）">
<style>
  /* 高亮补全文本的样式 */
  ::selection {
    background-color: #ffeb3b;
  }
</style>
<script>
  const genderInput = document.getElementById('genderInput');
  let currentSuggest = '';

  // 监听输入事件，生成补全提示
  genderInput.addEventListener('input', function(e) {
    const inputVal = e.target.value.toLowerCase();
    currentSuggest = '';

    if (inputVal.startsWith('m') && inputVal.length < 4) {
      currentSuggest = 'Male';
      const prefix = inputVal;
      const suffix = currentSuggest.slice(prefix.length);
      // 设置输入框值并选中高亮后缀
      e.target.value = prefix + suffix;
      e.target.setSelectionRange(prefix.length, currentSuggest.length);
    } else if (inputVal.startsWith('f') && inputVal.length < 6) {
      currentSuggest = 'Female';
      const prefix = inputVal;
      const suffix = currentSuggest.slice(prefix.length);
      e.target.value = prefix + suffix;
      e.target.setSelectionRange(prefix.length, currentSuggest.length);
    }
  });

  // Tab键触发补全
  genderInput.addEventListener('keydown', function(e) {
    if (e.key === 'Tab' && currentSuggest) {
      e.preventDefault();
      this.value = currentSuggest;
      currentSuggest = '';
    }
  });

  // 点击外部取消高亮选中，保留用户输入的前缀
  document.addEventListener('click', function(e) {
    if (e.target !== genderInput && currentSuggest) {
      const currentCursorPos = genderInput.selectionStart;
      genderInput.value = genderInput.value.slice(0, currentCursorPos);
      currentSuggest = '';
    }
  });
</script>

内容的提问来源于stack exchange，提问作者Yousuf Sheikh