输入框键入@后无法展示动态下拉数据的技术求助

嘿，我来帮你搞定这个@触发下拉的问题！你的代码已经能捕获@并拿到数据了，主要问题出在下拉容器的展示逻辑和输入判断的准确性上，咱们一步步改：

第一步：准备下拉容器的基础HTML #

首先得在输入框下方加一个用来展示下拉列表的容器，还要给输入框加相对定位，让下拉框能精准对齐：

<div style="position:relative; width:300px;">
  <input type="text" value="" id="dSuggest" style="width:100%;" />
  <!-- 下拉容器，默认隐藏 -->
  <div id="view_workforce" style="display:none; position:absolute; top:100%; left:0; right:0; border:1px solid #ddd; background:white; max-height:250px; overflow-y:auto; z-index:100;"></div>
</div>

第二步：优化输入判断与下拉展示逻辑 #

你原来的判断dInput == '@'只有当输入框里**只有@**的时候才会触发，这显然不符合实际场景（用户可能在输入中途打@）。另外，要避免重复触发Ajax请求，还要在拿到数据后显示下拉框：

$(document).ready(function() {
  let isDataLoaded = false; // 标记数据是否已加载，避免重复请求
  const $input = $("#dSuggest");
  const $dropdown = $("#view_workforce");

  $input.keyup(function(e) {
    const inputVal = $(this).val();
    // 判断是否输入内容包含@且数据未加载
    const hasAt = inputVal.includes('@');
    if (hasAt && !isDataLoaded) {
      $.ajax({
        type: "get",
        url: "<?php echo base_url(); ?>data/name",
        success: function (data) {
          console.log(data);
          $dropdown.html(data);
          isDataLoaded = true;
          $dropdown.show(); // 显示下拉框
          
          // 给下拉选项添加点击事件
          $dropdown.find('li').click(function() {
            const selectedVal = $(this).text();
            // 把选中的值追加到@后面，你也可以根据需求调整替换逻辑
            const newVal = inputVal.replace('@', `@${selectedVal} `);
            $input.val(newVal);
            $dropdown.hide(); // 隐藏下拉框
            isDataLoaded = false; // 重置标记，允许下次输入@再触发
          });
        }
      });
    } else if (!hasAt) {
      // 如果输入框里没有@了，隐藏下拉并重置标记
      $dropdown.hide();
      isDataLoaded = false;
    }
  });

  // 点击页面其他区域时隐藏下拉框
  $(document).click(function(e) {
    if (!$(e.target).closest('#dSuggest, #view_workforce').length) {
      $dropdown.hide();
      isDataLoaded = false;
    }
  });
});

关键改进点说明 #

• 输入判断优化：不再局限于输入框只有@，只要内容包含@且数据没加载过就触发请求
• 下拉容器显示控制：Ajax成功后主动调用show()显示下拉，无@时自动隐藏
• 选项选择逻辑：点击选项后把选中值插入输入框，重置状态以便下次触发@选择
• 外部点击隐藏：点击页面其他区域时自动收起下拉，提升用户体验

注意事项 #

• 确保后端返回的data是可直接插入的列表HTML，比如<li>张三</li><li>李四</li>这种格式
• 如果需要支持多次输入@（比如输入多个@选择不同值），可以调整isDataLoaded的判断逻辑，或者根据光标位置判断当前是否处于@的输入状态

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