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 搜索这些类：
＆＃34; ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all＆＃34;

.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**/

jquery自动完成风格

1 个答案: