Question

我尝试使用jQuery自动完成插件，其高度有限且“溢出-x：自动”;＆＃39;为结果设置。我进行搜索，并按需要加载数据。问题是，当结果超过最大高度时，我一开始滚动，结果div就会消失。单击结果将按预期填充文本框。

我所做的与以下内容类似：http://jqueryui.com/demos/autocomplete/#maxheight

我唯一的区别是一些CSS来设置样式，一些通过添加/删除CSS类处理突出显示结果的实时事件，以及此处包含的猴子补丁添加结果突出显示： jQueryUI: how can I custom-format the Autocomplete plug-in results?

评论这些更改没有任何作用。代码如下：

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解决了我的问题。

滚动时jQuery自动完成框消失了吗？

1 个答案: