jQuery自動完成框消失在滾動？

Question

我正在嘗試使用高度有限且'overflow-x：auto;'有限的jQuery自動完成插件。 設置結果。 我進行搜索，並按需加載數據。 問題是當結果超過最大高度時，我一開始滾動，結果div就會消失。 單擊結果將按預期填充文本框。

我在做什么類似於以下內容： http : //jqueryui.com/demos/autocomplete/#maxheight

我唯一的區別是一些CSS樣式，一些通過添加/刪除CSS類處理突出顯示結果的實時事件，以及此處包含的添加了突出顯示結果的Monkey補丁： jQueryUI：如何自定義格式化自動完成插件結果？

評論這些更改無濟於事。 代碼如下：

function monkeyPatchAutocomplete() {
  // Adapted from code on https://stackoverflow.com/questions/2435964/jqueryui-how-can-i-custom-format-the-autocomplete-plug-in-results
  // don't really need this, but in case I did, I could store it and chain
  var oldFn = $.ui.autocomplete.prototype._renderItem;

  $.ui.autocomplete.prototype._renderItem = function( ul, item) {
    var re_match = new RegExp(this.term, "ig");
    var t = item.label.replace(re_match,"<span style='font-weight:bold;'>" + 
            this.term + 
            "</span>");
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + t + "</a>" )
        .appendTo( ul );
  };
}

$(document).ready(function() {
  monkeyPatchAutocomplete();

  $.getJSON("cgi-bin/script.pl?return_type=search", function(json) {
    $.each(json.results, function(i,result) {
      var result_string = result.string1 + "/" + result.string2 + "/" + result.string3;
      arr_results.push(result_string);
    });
    $("input#search_box").autocomplete({ minLength: 2, source: arr_results });
  });

  $("li.ui-menu-item").live("mouseover", function() {
    if( $(this).has("a.ui-state-hover") ) {
      $(this).addClass("autocomplete-hover");
    }
  });
  $("li.ui-menu-item").live("mouseout", function() {
    $(this).removeClass("autocomplete-hover");
  });
}

和CSS：

ul.ui-autocomplete {
  background-color: lightblue;
  border: 1px solid black;
  width: 300px;
  font-size: 14px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

li.ui-menu-item {
  list-style-type: none;
}

.autocomplete-hover {
  background-color: skyblue;
  cursor: pointer;
}

jQuery / jQuery-UI專業人員的任何建議都將受到歡迎。

Answer 1

我在嘗試構建演示頁面時找到了答案； 我正在使用有關自動完成功能的過時文檔，該文檔將自動完成功能作為單獨的JS文件加載。

僅加載jquery.min.js和jquery-ui.min.js解決了我的問題。