Question

我正在使用jQuery自动填充文本框。我的代码和脚本工作正常，但现在我需要一个'可滚动的下拉列表（沿着X轴和Y轴）而不是简单的下拉列表。

用于促进自动完成下拉列表的脚本：

$(function () {
    $("#TextBox").autocomplete({
        source: "home/search",
        dataType: 'json',
        minLength: 1,
        // max: 10,
        // scroll:true
    });
});

Answer 1

你可以将x和/或y轴设置为可滚动，但它不是通过自动完成脚本完成的，而是通过自动完成样式完成的。该脚本不对元素的显示方式负责，只对它们如何交互负责。您希望更改的特定样式是ui-autocomplete类。

假设您想要最多200px高和250px宽的下拉（如果没有足够的结果来填充它，则允许它更小）。然后你会把它添加到你的CSS：

.ui-autocomplete { 
    /* these sets the height and width */
    max-height:200px; 
    max-width: 236px; 

    /* these make it scroll for anything outside */
    overflow-x:scroll;
    overflow-y:scroll;
}

如果您想更改尺寸，只需更改上面的尺寸即可。如果要使x轴不可滚动，但保留y，则将其更改为：

.ui-autocomplete { 
    /* same as above */
    max-height:200px; 
    max-width: 236px; 

    /* note that x is hidden now */
    overflow-x:hidden;
    overflow-y:scroll;
}

您可以在jQuery UI autocomplete site上阅读更多内容。我已链接到右侧的“可滚动结果”部分，您可以点击“查看来源”查看完整示例。他们很好地注意到IE不支持max-height，所以你必须只为IE支持设置一个高度。

Answer 2

如果有人遇到同样的问题（想要使用垂直滚动自动完成）用这个：

.ui-autocomplete 
{
  height: 200px;
  overflow-y: auto;
}

Answer 3

http://jqueryui.com/demos/autocomplete/#event-select如果遇到同样的问题，可以参考此链接

jQuery自动完成可滚动下拉列表

3 个答案: