У меня есть простой вход, как этотJQuery автозаполнения: не может применить стиль на сфокусированного пункта
<input id="name-srch" type="text" data-type="string">
И мой JS (упрощенный)
$('#name-srch').autocomplete({
source: function (request, response) {
$.ajax({
url: ...,
data: ...,
success: function (data) {
// note that 'data' is the list of elements to display
response(data)
}
});
},
select: function (event, ui) {
// do some stuff
return false
},
focus: function (event, ui) {
console.log(ui.item.Name) // just to see if the focus event is triggered, and it is
return false
}
})
.autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>")
.append("<a>" + item.Name + "</a>")
.appendTo(ul);
};
JQuery автозаполнения заполнить <ul>
с <li>s
, как и должно, и запускает событие фокусировки при наведении курсора мыши или вниз/вверх, как следует.
Проблема заключается в том, что я хочу, чтобы применить определенный стиль сфокусированного элемента, так что в моем CSS У меня есть что-то вроде этого
.ui-state-focus {
background-color: red;
font-weight: bold;
}
Там моя проблема, сфокусированный пункт никогда не принимает ui-state-focus
класса и поэтому он никогда не принимает определенный стиль.
Что я делаю не так :(
EDIT: я уже пытался добавить в моем CSS что-то вроде
.ui-menu-item:hover {
background-color: red;
font-weight: bold;
}
Действительно это делает трюк для висения, но не для фокус с помощью клавиши со стрелками вверх/вниз. Более того, мне это не очень нравится, я бы предпочел, чтобы он работал так, как это было бы, если бы я мог ...
Да, я думал об этом и попытался это уже (должны упомянуть, что может быть). Действительно, он работает для зависания, но не для фокуса с помощью клавиши со стрелкой вниз/вверх:/Нет ли способа заставить его работать так, как оно предназначено? –
Привет, вы можете проверить обновленную версию? – Vahan
Такая же проблема, как и раньше, делает трюк при наведении (из-за '.ui-menu-item: hover'), но стиль не применяется в случае фокуса с помощью клавиши« вниз »/« вверх ». Я думаю, что проблема может быть не в моем CSS. Как-то кажется, что JQuery Autocomplete не выполняет свою работу с использованием правильных классов (в моем случае 'ui-state-focus'), если мне удастся заставить его работать правильно, я сохранен. Моя версия JQuery UI - это 1.12.0, кстати –