1

我正在尝试自定义 jQueryUI AutoComplete 小部件的结果下拉列表的呈现，以实现类似网格的显示样式，使用 CSS 限制高度并允许滚动（与 结合max-height）overflow-y: scroll但我遇到了一个奇怪的行为滚动下拉列表本身：它会自动滚动回顶部和/或滚动只是将鼠标移到列表本身上。

您可以单击此处查看关于 jsFiddle 的重现，或查看下文（代码可以放在本地 html 文件中并运行）。要测试自动完成，请在文本框中输入字符串val。

<html>
<head>
<!-- Behavior seems consistent across jQuery/UI versions --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
    var items = [];
    for (var i = 0; i < 100; i++) items.push('val' + i);
    var reference = $('#in1').autocomplete({ source: items });
    var broken = $('#in2').autocomplete({ source: items }).data('ui-autocomplete');

    var renderItem = function(ul,item) {
        var $li = $('<li />'); 
        var $a = $('<a />').css({width: '270px', float:'left', clear: 'both', padding:'0'}).appendTo($li);
        //Build fake "columns"
        for (var i = 0; i < 3; i++) 
            var $span = $('<span />').html('[Col'+i+item.value+'] ').appendTo($a);

        return $li.appendTo(ul);
    }
    broken._renderItem = renderItem;    
});
</script>
<style type="text/css">
* { font-family: Arial; font-size:12px; }
.ui-autocomplete {
    max-height: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
}
</style>
</head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<body>
<strong>enter 'val' to test</strong>
SCROLLS OK: <input id="in1" type="text" /> SCROLLS WEIRD: <input id="in2" type="text" />
</body>
</html>

我回到基础并重新检查了自动完成页面，但我的代码是正确的。这里发生了什么 ？

4

1 回答 1

1

那么我可以告诉你是什么导致了这个问题。

它是由添加float:'left'以下行引起的：

var $a = $('<a />').css({width: '270px', /*float:'left',*/ clear: 'both', padding:'0'}).appendTo($li);
于 2013-11-19T23:26:48.600 回答