如何在自动完成中获得滚动位置

时间:2012-11-06 15:39:12

标签: jquery asp.net

我正在使用Jquery AutoComplete。 http://api.jqueryui.com/autocomplete/

我面临的问题是,当这个jquery自动完成时,我会在一行中向我显示结果。我希望它应该显示10个结果并在滚动中休息。

$("#<%=txtProductName.ClientID %>").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("~/Service.asmx/GetProductAutoComplete") %>',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    ID: item.split('-')[1],
                                    rt: item.split('-')[2]

                                };
                            }));
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("#<%=txtQuantity.ClientID %>").val('1');
                    $("#<%=hdfProductID.ClientID %>").val(i.item.ID);

                },
                minLength: 0,
                autoFocus: true,
                scroll:true


            });

1 个答案:

答案 0 :(得分:2)

<style>
.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}
/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
    height: 100px;
}
</style>