javascript - 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 网站一样。 Website我的结果的宽度也太大了，我有什么办法可以控制它，以便根据员工姓名宽度会扩大。

Answer 1

是的，您可以更改自动完成的宽度。
检查您的元素并找到自动完成的根 div。
搜索这些类(class):
"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**/