如何给滚动条，高度自动完成显示列表？答案

【问题标题】：How to give scroll bar,height to autocomplete showing list?如何给滚动条，高度自动完成显示列表？
【发布时间】：2014-03-04 08:01:49
【问题描述】：

我已经在文本框上使用了自动完成功能，但是对于更多的数据它会占用整页，我想给它滚动条和高度。

这是我的代码：

   $(document).ready(function () {

     $("#<%LkTxt.ClientID %>").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/ETAWebService.asmx/GetLookUp") %>',
                data: "{ 'prefix': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                scroll: true,
                scrollHeight: 180,
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[0],
                            val: item.split('-')[1]
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("#<%=CmbHdn.ClientID %>").val(i.item.val);
        },
        minLength: 1
    });
});

</script>

【问题讨论】：

标签： jquery asp.net css vb.net

【解决方案1】：

很简单，只需覆盖 CSS！

ul.ui-autocomplete { max-height: 350px !important; overflow: auto !important; }

【讨论】：

【解决方案2】：

您要在其中应用自动完成功能的文本框将其放入 div 中，为该 div 定义一个类，然后对其应用 css。

例子-

  <style>
.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 20px;
}
 html .ui-autocomplete {
    height: 100px;
}
</style>

<div class="ui-autocomplete">
    <input type="text" id="search" name="search" />
</div>

【讨论】：