$(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-аффект. Так что я хочу, чтобы черный тонкий линейный ящик вокруг результатов, и когда вы hoverover имя штата, он должен быть серого цвета, как у исходного веб-сайта jquery. Веб-сайт также имеет слишком большую ширину моего результата, я могу контролировать его так, чтобы в соответствии с шириной имени персонала расширялось.
Да, вы можете изменить ширину автозаполнения.
Осмотрите свой элемент и найдите корневой раздел автозаполнения.
поиск этих классов:
"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**/
ui-menu
иui-menu-item
согласно вашему требованию.