jQuery自动完成样式

用户名
    $(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网站一样。网站上我的搜索结果的宽度也太大了,我有什么办法可以控制它,以便根据工作人员姓名的宽度来扩展。

Nakul91

是的,您可以更改自动完成的宽度。
检查您的元素并找到自动完成的根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**/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章