Autocomplete, обработка элемента списка при фокусе

Добрый день. Делаю список autocomplete с картинками:
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
 return $( "<li>" )
 .data( "ui-autocomplete-item", item )
 .append( "<div class=\"autocomplidiv\"><a>"+"<img class=\"autocompliimg\" src= \""+item.icon+"\"/>" +"&nbsp<br/>" +item.label + "</a></div>" )
 .appendTo( ul );
При этом пытаюсь при фокусе элемента списка добавить ему класс:
focus: function( event, ui ) {
 $(ui.item).addClass("ui-state-focus");
 }
но класс не добавляется. Подскажите пожалуйста, что я неправильно делаю?
9 ответов

culver, у фокуса ui.item это обьект данных строки на которую навели но не сама строка можно поискать по содержанию
focus: function( event, ui ) {

 $('li:contains("'+ui.item.label+'")').addClass("ui-state-focus");


 }


Спасибо, работает. Но получается, что прямого доступа из функции, к элементу, получившему фокус нет? Странно, что-то не верится.


culver, выведите в консоль да посмотрите ui кроме label и value никакой больше информации


Вопрос почти риторический, но всё же. Пока я не делал обработку фокуса, класс ui-state-focus добавлялся к li автоматически, подозреваю, что есть обработчик фокуса по умолчанию, где и добавляется этот класс, интересно как?


culver, return $( "
  • " )
    return $( "<li>" , {class : 'ui-state-focus'})
    и не мучать фокус

  • Если класс добавлять в _renderItem то все элементы списка его получат, а мне нужно только тот, что в фокусе. Сейчас это выглядит у меня так:
    $('.ui-menu-item').removeClass("ui-state-focus")
     $('li:contains("'+ui.item.label+'")').addClass("ui-state-focus");
    а дальше с помощью стилей подсвечиваю элемент с фокусом.
    .ui-autocomplete .ui-state-focus div{
    	font-weight:bold;
     background-color: #eeeeee;
    }


    Или Вы хотите сказать, что рендер отрабатывается каждый раз при фокусе, а не только при начальном формировании списка?


    culver, может вам hover нужен.ui-autocomplete li div:hover{ font-weight:bold; background-color: #eeeeee; }и никаких add и remove


    но hover не будет реагировать на перебор списка с помощью клавиатуры.