自定义可搜索Dropdown问题：滚动逻辑与:visible选择器失效

嘿，我来帮你搞定这个搜索后高亮逻辑不生效的问题！咱们先从代码里的核心问题说起：

一、最可能的原因：执行时机搞反了 #

看你当前的代码，那段判断选中项是否可见的逻辑，是在过滤列表项之前执行的：

// 先判断，但这时候列表还没被过滤！
if(!$(".selectable-selected").is(":visible")) { 
  $(".selectable-dropdown li:first-child").addClass("selectable-hover"); 
}
// 然后才开始过滤显示/隐藏列表项
var query = this.value;
$(".selectable-dropdown-each").each(function (i, elem) {
  // ...过滤逻辑
});

这就导致判断的时候，所有列表项还是原来的显示状态，根本不知道过滤后选中项会不会被隐藏，自然不会触发高亮逻辑。

二、修复步骤：调整顺序+完善边界处理 #

把判断逻辑移到过滤完成之后，同时补充几种边界情况的处理（比如用户还没选过任何项、搜索结果为空的情况），修改后的代码如下：

$(function() { 
  $("#selectable").on("keyup", function (e) { 
    $(".selectable-dropdown").show(); 
    if(e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40 && e.keyCode != 13) { 
      var query = this.value;
      // 第一步：先完成列表项的过滤
      $(".selectable-dropdown-each").each(function (i, elem) {
        if ($(this).text().toLowerCase().indexOf(query.toLowerCase()) != -1) {
          $(this).show();
        } else {
          $(this).hide();
        }
      });

      // 第二步：过滤完成后再处理高亮逻辑
      var $selectedItem = $(".selectable-selected");
      var $visibleItems = $(".selectable-dropdown-each:visible");
      
      // 两种需要高亮第一项的情况：
      // 1. 有选中项，但选中项不在当前搜索结果里（不可见）
      // 2. 没有选中项，但有搜索结果
      if (($selectedItem.length && !$selectedItem.is(":visible")) || (!$selectedItem.length && $visibleItems.length)) {
        // 先清空所有hover类，避免冲突
        $(".selectable-dropdown li").removeClass("selectable-hover");
        // 给第一个可见项添加高亮类
        $visibleItems.first().addClass("selectable-hover");
      }
    } 
  }); 
});

三、如果还是不生效？试试这些排查点 #

• 检查CSS样式：确认.selectable-hover的样式是否正确，有没有被其他优先级更高的样式覆盖（比如!important或者更具体的选择器），导致视觉上看不到高亮效果。
• 排查事件冲突：你的代码里有mouseover和mouseleave事件会移除/添加selectable-hover类，如果鼠标不小心划过下拉框，会覆盖你搜索时添加的高亮，这时候可以在添加hover类后，暂时禁用鼠标事件，或者调整事件逻辑。
• 加日志调试：在判断逻辑里加console.log，看看变量值是否符合预期：

  console.log("选中项是否存在：", $selectedItem.length);
  console.log("选中项是否可见：", $selectedItem.is(":visible"));
  console.log("可见结果数量：", $visibleItems.length);
  

  通过日志就能知道是判断条件不满足，还是类添加后被其他代码移除了。

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