JQuery автозаполнение и фокус события - PullRequest
Новая
       17

JQuery автозаполнение и фокус события

4 голосов
/ 05 июня 2011

Mornin 'all,

Мне трудно играть с событиями виджета автозаполнения jQuery UI.Я хочу добавить пользовательский класс к родителю <li> выбранного элемента.Сгенерированная разметка выглядит следующим образом: 

<li class="result">
   <a><span></span></a>
</li>

Когда элемент находится в фокусе, jQuery добавляет класс .ui-state-hover к <a> Как я могу добавить класс .selected к родителю <li>?Я пытаюсь сделать это из события focus, но я не знаю, как получить доступ к родителю <li>.Я посмотрел на исходный код jQuery UI и нашел, где и как применяется .ui-state-hover, но это не помогает.

Вот мой код автозаполнения. 

/**
* Override the default behavior of autocomplete.data('autocomplete')._renderItem.
*
* @param ul _object_ The conventional ul container of the autocomplete list.
* @param item _object_ The conventional object used to represent autocomplete data.
* {value:'',label:'',desc:'',icon:''}
*/
var renderItemOverride = function (ul, item) {
        return $('<li class="result"></li>')
                .data("item.autocomplete", item)
                .append('<a><span class="name">' + item.label + '</span><span class="type"></span></a>')
                .appendTo(ul);
};

$('#live_search').autocomplete({
    source: function(request, response) {

        $.ajax({
            url: "search.json",
            dataType: "json",
            cache: false,
            data: {
                term: request.term
            },
            success: function(data ) {
                response($.map(data.contacts, function(item) {
                    return {
                        label: item.name || (iterm.firstname + item.lastname),
                        value: item.name || (iterm.firstname + item.lastname),
                        id:    item._id
                    }
                }));
            }
        });

    },
    appendTo: '.live_search_result_list',
    autoFocus: true,
    minLength: 2,
    focus: function(event, ui) {

    },
    select: function(event, ui) {
        console.log("do a redirection");
    }

}).data('autocomplete')._renderItem = renderItemOverride;

})

Любой ниндзя может помочь?

1 Ответ

5 голосов
/ 05 июня 2011

Как насчет: 

focus: function(event, ui) {
    $(".live_search_result_list li.result").removeClass("selected");
    $("#ui-active-menuitem")
        .closest("li")
        .addClass("selected");
},

Затем удалить класс selected из любых li с, когда меню теряет фокус мыши: 

$(".live_search_result_list ul").mouseleave(function() {
    $(this).children("li.result").removeClass("selected");
});

Вот рабочий пример: http://jsfiddle.net/andrewwhitaker/4z3SQ/

...