jquery自動完成風格

Question

    $(document).ready(function () {
        $("#staff").autocomplete({
            source: "/classname/methodname",
            minLength: 1,
            typeAhead: true,
            select: function (event, ui) {
            }
        })
            .data("ui-autocomplete")._renderItem = function (ul, x) {
                return $("<li>")
                  .append("<a>" + x.StaffFullName + " " + x.Department + " </a>")
                  .appendTo(ul);
            };
    });

我正在使用MVC來設計我的網站，我正在使用自動填充來查找在公司工作的員工的姓名。 當我運行網站時，我得到員工姓名，然后是部門。 我想要3D影響。 所以我希望在結果周圍有一個黑色細線框，當你懸停一個員工名字時，它應該是原始jquery網站的灰色。 網站也是我的結果的寬度太大有沒有辦法我可以控制它，以便根據員工名稱寬度將擴大。

Answer 1

是的，您可以更改自動完成的寬度。
檢查您的元素並找到自動完成的根div。
搜索這些類：
“ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all”

.ui-widget-content {
border: 1px solid #AAAAAA;
color: #222222;
} //for background color.

.ui-menu {
display: none;
left: 561px;
top: 477px;
width: 554px;
}// for div width

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 4px;
}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
background-color:#CCCCCC !important; 
}/**Color added for autocomplete hover on selected item**/