Question

我在文本框中使用了自动完成功能，但是对于更多数据，它需要整页，我想给它滚动条和高度。

这是我的代码：

   $(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>

Answer 1

这很简单，只需覆盖CSS！

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

Answer 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>

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

2 个答案: