选择器是：可见不起作用

Question

已解决：这是我制作的一个非常非常定制的可搜索下拉列表。它现在实际上运作良好，但我仍然有一点问题。我可以这样做，当我使用向上/向下箭头时，突出显示的项目仍然可以在下拉菜单上看到，就像通常的下拉菜单一样（下拉菜单自动滚动上/下键并且不会被隐藏）？正如您所看到的，当下拉列表需要滚动时我尝试使用$(".selectable-dropdown").scrollTop(34);，但它似乎只能工作一次。

而且，我将此行if(!$(".selectable-selected").is(":visible"))放在搜索功能上。我想要实现的是当我搜索某些内容并且还从列表中选择了某些内容时，如果所选的li未包含在搜索结果中，则搜索结果的最顶部会突出显示。但它不起作用。我错过了什么吗？

任何帮助表示赞赏！ ：）

编辑：我终于知道如何让它有效！每次单击向上/向下键时，滚动量必须增加并添加。第二个问题仍然没有解决。

$(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) {
      if(!$(".selectable-selected").is(":visible")) {
        $(".selectable-dropdown li:first-child").addClass("selectable-hover");   
      }
      var query = this.value;
      $(".selectable-dropdown-each").each(function (i, elem) {
        if ($(this).text().toLowerCase().indexOf(query.toLowerCase()) != -1) {
          $(this).show();
        } 
        else {
          $(this).hide();
        }
      });
    }
  });
});

function repositionSelectable() {
  var selectablePosition = $(".form-dropdown").offset();
  var selectableWidth = $(".form-dropdown").width();
  var selectablePositionLeft = selectablePosition.left;
  var selectablePositionTop = selectablePosition.top + 56;
  $(".selectable-dropdown-wrapper").css({"top": selectablePositionTop + "px"});
  $(".selectable-dropdown-wrapper").css({"left": selectablePositionLeft + "px"});
  $(".selectable-dropdown-wrapper").css({"width": selectableWidth + "px"});
}

$("#selectable").focus(function() {
  repositionSelectable();
  $(".selectable-dropdown").show();
  if (!$(".selectable-selected").length)  {
    $(".selectable-dropdown li:first-child").addClass("selectable-hover");
  }
});

$(".selectable-dropdown-each").click(function() {
  var selectedChoice = $(this).text();
  $("#selectable").val(selectedChoice);
  $(".selectable-dropdown-each").removeClass("selectable-selected");
  $(this).addClass("selectable-selected");
  $(".selectable-dropdown").hide();
});

$(window).resize(function() {
  repositionSelectable();
});

$(".selectable-dropdown-each").mouseover(function() {
  $(".selectable-dropdown li").removeClass("selectable-hover");
  $(this).addClass("selectable-hover");
});

$(".selectable-dropdown-each").mouseleave(function() {
  $(this).removeClass("selectable-hover");
});

var needScrollTop = false;
var scrollAmount = 0;

$("#selectable").keydown(function(e) {
  if (e.keyCode == 40) { // down
    if (!$(".selectable-selected").length)  {
      if (!$(".selectable-hover").length)  {
        $(".selectable-dropdown li:first-child").addClass("selectable-hover");
      }
      else {
        $(".selectable-hover").addClass("temp");
      }
    }
    else {
      if (!$(".selectable-hover").length)  {
        $(".selectable-selected").addClass("temp");
      }
      else {
        $(".selectable-hover").addClass("temp");
      }
    }
    if($(".temp").next().hasClass("selectable-dropdown-each")) {
      $(".temp").next().addClass("selectable-hover");
      $(".temp").removeClass("selectable-hover temp");
    }
    else {
      
    }
    var highlightPosition = $(".selectable-hover").offset();
    var selectablePositionTest = $(".selectable-dropdown").offset();
    if (needScrollTop) {
      $(".selectable-dropdown").scrollTop(scrollAmount + 34);
      scrollAmount += 37;
      console.log("scroll");
    }
    if(((highlightPosition.top + 36) >= (selectablePositionTest.top + 200)) && !needScrollTop) {
      $(".selectable-dropdown").scrollTop(16);
      needScrollTop = true;
      scrollAmount += 16;
    }
  }
  else {
    if (e.keyCode == 38) { // up 
      if ($(".selectable-hover").length) {
        $(".selectable-hover").addClass("temp");
      }
      else {
        $(".selectable-selected").addClass("temp");
      }
      if($(".temp").prev().hasClass("selectable-dropdown-each")) {
        $(".temp").prev().addClass("selectable-hover");
        $(".temp").removeClass("selectable-hover temp");
      }
    }
    else {
      if (e.keyCode == 13) { // enter  
        var selectedChoice = $(".selectable-hover").text();
        $("#selectable").val(selectedChoice);
        $(".selectable-dropdown-each").removeClass("selectable-selected");
        $(".selectable-hover").addClass("selectable-selected");
        $(".selectable-dropdown-each").removeClass("selectable-hover");
        $(".selectable-dropdown").hide();
        $("#selectable").blur();
      }
    }
  }
});

.form {
  margin-bottom: 40px;
  margin: 0 auto;
  width: 768px;
  font-family: 'Open Sans', sans-serif;
}

h1 {
 font-size: 13px;
  text-transform: uppercase;
  color: #0099ff;
  margin-bottom: 24px;
}

.input-text {
  height: 34px;
  border: solid 1px #c4c4c4;
  width: 366px;
  font-size: 13px;
  padding: 0 0 0 12px;
  margin-bottom: 24px;
  color: #333;
  background-color: #fff;
  border-radius: 0;
}

.input-text:focus {
  border: solid 1px #00c983; 
}

::placeholder {
  color: #c4c4c4; 
  font-size: 13px;
}

.form-input-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #333;
}

.input-disabled {
  background-color: #eee; 
}

.form-unit {
  position: relative;
  vertical-align: top;
}

.input-select-btn {
  width: 34px;
  height: 34px;
  position: absolute;
  top: 25px;
  right: 0;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}

.on-disabled-btn {
  border: solid 1px #c4c4c4;
  background-color: #fff;
}

.input-select-btn i {
  font-size: 12px;
  color: #333;
}

.form-row {
  display: block;
  width: 100%;
  margin: 0 !important;
}

.form-divided {
  display: inline-block;
}

.form-divided-left {
  margin-right: 32px;
}

.datepicker-calendar {
  position: absolute;
}

.dropdown-icon {
  transform: translateY(-2px); 
}

.selectable-dropdown {
  border-radius: 0 !important;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15) !important;
  border: none !important;
  margin-top: 4px !important;
}

.selectable-dropdown-wrapper {
  position: absolute; 
  top: 0;
  left: 0;
}

.selectable-dropdown {
  max-height: 200px; 
  overflow-y: scroll;
  background-color: #fff;
  display: none;
  width: 100%;
}

#selectable {
  margin-bottom: 0; 
}

.selectable-selected {
  background-color: #eee; 
}

.selectable-dropdown-each {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 24px !important;
  vertical-align: middle !important;
  padding-left: 8px !important;
}

.selectable-dropdown-each {
  display: block; 
  height: 36px;
  line-height: 36px !important;
  padding-right: 0;
  padding-left: 16px;
}

.selectable-hover {
  background-color: #CAF1FF;
}

.form-dropdown {
  margin-bottom: 24px; 
}

.labeled-row {
  display: block;
  width: 366px;
  overflow: hidden;
}

.labeled-label {
  display: inline-block;
  width: 96px;
  margin-right: 16px;
  line-height: 34px;
  padding-left: 16px;
  font-size: 13px;
}

.labeled-input {
  display: inline-block;
  position: relative;
  float: right;
  width: calc(100% - 115px);
}

.labeled-input .input-text {
  width: 100%; 
  margin-bottom: 8px;
}

.labeled-input a {
  position: absolute;
  top: 0; 
  right: 0;
  color: #333;
}

.labeled-input a:hover,
.labeled-input a:focus,
.labeled-input a:active {
  color: #333;
  text-decoration: none;
}

.form-unit .select2-container, .form-unit .select2-selection {
  width: 366px !important;
}

.datepicker {
  font-family: 'Open Sans', sans-serif;
  border-radius: 0 !important;
  border: none !important;
}

@media (max-width: 767px) and (min-width: 576px) {
  .form {
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
  }
  
  .form-divided-left {
    margin-right: 24px;
  }
  
  .form-divided {
    width: calc(50% - 14px);
  }
  
  .input-text,
  textarea {
    display: inline-block;
    width: 100%;
  }
  
  .input-select-btn {
    right: 0;
  }
  
  .labeled-row {
    display: block;
    width: 100%;
  }
  
  .form-unit .select2-container, .form-unit .select2-selection {
      width: 100% !important;
  }
}

@media (max-width: 575px) {
  .form {
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
  }
  
  .form-divided {
    display: block; 
    width: 100%;
  }
  
  .form-divided-left {
    margin-right: 0; 
  }
  
  .input-text,
  textarea {
    display: inline-block;
    width: 100%;
  }
  
  .labeled-row {
    display: block;
    width: 100%;
  }

  .form-unit .select2-container, .form-unit .select2-selection {
      width: 100% !important;
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="form">
  <div class="form-row">
    <div class="form-unit form-divided form-divided-left">
      <label for="date" class="form-input-label">Date</label>
      <input type="text" class="input-text input-datepicker" id="date" placeholder="Select date">
      <a class="input-select-btn" id="datepicker-btn"><i class="fas fa-calendar-alt"></i></a>
    </div>
    <div class="form-unit form-divided form-dropdown">
      <label for="selectable" class="form-input-label">Type</label>
      <input id="selectable" class="input-text" type="text" placeholder="Select type">
      <a class="input-select-btn"><i class="fas fa-sort-down dropdown-icon"></i></a>
    </div>
  </div>
</div>
  
<div class="selectable-dropdown-wrapper">
  <ul class="selectable-dropdown">
     <li class="selectable-dropdown-each">Choice ABC</li>
     <li class="selectable-dropdown-each">Choice BCD</li>
     <li class="selectable-dropdown-each">Choice DEF</li>
     <li class="selectable-dropdown-each">Choice GHI</li>
     <li class="selectable-dropdown-each">Choice IJK</li>
     <li class="selectable-dropdown-each">Choice UVW</li>
     <li class="selectable-dropdown-each">Choice XYZ</li>
     <li class="selectable-dropdown-each">Choice 123</li>
     <li class="selectable-dropdown-each">Choice 345</li>
     <li class="selectable-dropdown-each">Choice 789</li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>