如何用jQuery实现点击搜索下拉列表项填充输入框并关闭列表

问题根因 #

现有代码无法正常实现选中填充的核心问题有3个：

• 选中逻辑完全错误：mySelect()方法试图把所有姓名DOM节点插入到input输入框内部，input是单标签元素，不支持嵌套子节点，正确做法是把选中的姓名文本赋值给输入框的value属性
• 点击选中时没有定位到当前点击的具体项，直接选中了页面上所有.name12元素，无法获取单个选中值
• 搜索匹配逻辑存在冗余和范围错误：重复做大小写判断，还把「无匹配结果」的提示块当成人员项参与匹配遍历

修复后完整代码 #

JavaScript部分 #

var $noResultBlock = $('.no-results');
// 初始隐藏搜索下拉
$(".personsMenu").hide();

$(".my-textbox").keyup(function() {
  const inputVal = $(this).val().trim();
  let hasMatch = false;

  // 输入为空时直接隐藏下拉，终止后续逻辑
  if (!inputVal) {
    $(".personsMenu").hide();
    $noResultBlock.hide();
    return;
  }

  $(".personsMenu").show();
  // 仅遍历人员条目，排除无结果提示
  $(".personsMenu .nm1").each(function() {
    // 统一转小写做匹配，无需重复判断大小写
    const itemText = $(this).text().toLowerCase();
    if (itemText.indexOf(inputVal.toLowerCase()) === -1) {
      $(this).hide();
    } else {
      hasMatch = true;
      $(this).show();
    }
  });

  // 控制无结果提示显隐
  $noResultBlock.toggle(!hasMatch);
});

/**
 * 选中人员姓名填充到输入框
 * @param {HTMLElement} ele 当前点击的姓名节点
 */
function mySelect(ele) {
  // 把选中的姓名文本赋值给输入框
  $(".my-textbox").val($(ele).text());
  // 隐藏下拉菜单
  $(".personsMenu").hide();
}

HTML部分 #

仅需要修改姓名项的点击事件，传入当前点击元素对象，其余结构保持不变即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="cover">
  <div name="selected">
    <i class="mdi-account-search mdi"></i>
    <input class="my-textbox" id="textboxEmp" autofocus="autofocus" placeholder="search staff member" />
  </div>
  <div class="personsMenu">
    <ul class="infor">
      <div class="nm1" name="selected">
        <!-- 点击事件传入this代表当前点击的元素 -->
        <li class="name12" onclick="mySelect(this)">Malubane Nyikiwe</li>
        <li>nyikiwe.malubane@m-t.co.za</li>
      </div>
      <div class="no-results">no employee found by that name</div>
      <div class="nm1" name="selected">
        <li class="name12" onclick="mySelect(this)">Chamano Sydney</li>
        <li>sydney.chamano@m-t.co.za</li>
      </div>
      <div class="nm1" name="selected">
        <li class="name12" onclick="mySelect(this)">Diphofa Tumelo</li>
        <li>tumelo.diphofa@m-t.co.za</li>
      </div>
    </ul>
  </div>
</div>

效果说明 #

修复后可完全实现预期交互：

• 输入框输入内容时自动弹出下拉，实时过滤匹配的人员项
• 无匹配结果时显示对应提示
• 点击人员姓名后自动把姓名填充到输入框，同时关闭下拉列表
• 输入框为空时下拉自动隐藏

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