設置自動完成列表項垂直

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