自动完成minlength和maxheight在mvc中不起作用？

Question

当我在文本字段中输入值时，它会列出数据库中的数据，但我无法修复列表框的高度和宽度。我给了

minLength: 0,
 maxItem: 5,

但它没有受到影响。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
   <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"rel="Stylesheet" type="text/css" />
    <script>
        $(function () {
            $("#txtMedicineName").autocomplete({
                minLength: 0,
                maxItem: 5,
                order: "asc",
                hint: true,
                accent: true,
                searchOnFocus: true,
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("AutoComplete")',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return item;
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("#txtMedicineName").val(i.item.val);
                },
                minLength: 1,
            });
        });
    </script>
}

例如：我从列表框中单击crocin，我无法从数据库中获取相应的ID。

如何将crocin产品ID值从数据库中获取到文本框。

Answer 1

只需使用限制列表显示的切片

 response($.map(data.slice(0, 5), function (item)
                            {
                            return item.Value;
                        }))

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" rel="Stylesheet" type="text/css" />


<input id="txtMedicineName" type="text" />



 <script>
        $(function ()
        {

        $("#txtMedicineName").on('focus', function () { $(this).keydown(); });

            $("#txtMedicineName").autocomplete({
                minLength: 0,
                maxItem: 5,
                order: "asc",
                hint: true,
                accent: true,
                searchOnFocus: true,
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("AutoComplete")',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.slice(0, 5), function (item)
                                {
                                return item;
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("#txtMedicineName").val(i.item.val);
                },
                minLength: 1,
            });
        });
    </script>

添加样式将显示滚动

<style>
    .ui-autocomplete {
        max-height: 100px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
    }
    /* 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>