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

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自动完成站点上阅读更多内容.我已链接到右侧的"可滚动结果"部分,您可以点击"查看来源"查看完整示例.他们很好地注意到IE不支持max-height,所以你必须为IE支持设置一个高度.