垂直设置自动完成列表项

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;
}