垂直设置autoComplete列表项

Question

我的自动完成列表水平如下：

但我想垂直显示列表项

我已经搜索并尝试实施这样的解决方案：

1. 溢出功能

   .ui-autocomplete {
   max-height: 600px;
   overflow-y: auto;   /* prevent horizontal scrollbar */
   overflow-x: hidden; /* add padding to account for vertical scrollbar */
   z-index:1000 !important;
   

   }

-

2

设置位置属性：

   .ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
    position:absolute;
}

但他们没有工作..

这是我的完整代码..

<div>            
@Html.TextBox("Country")
</div>


<div id="menu-container" style="position:absolute; width: 200px;"></div>

  $("#Country").autocomplete({
            source: function (request, response) {
                    $.ajax({
                        url: "*Controller Data*",
                        type: "POST",
                        dataType: "json",
                        data: { term: request.term },
                        success: function (data) {
                            response(data);

                        }
                    })
            },
            appendTo: '#menu-container',
                messages: {
                    noResults: "", results: ""
                }
            });

我怎样才能实现这个目标

Answer 1

如果我理解你要做什么，我认为你只用css（demo）来实现这个目标

ul.ui-autocomplete {
  width: auto !important;
}
.ui-menu-item {
  display: inline-block;
  width: 100px;
}