2011-06-05 195 views
4

Mornin所有,jQuery自動完成和焦點事件

我有麻煩玩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; 

})

任何忍者可以幫助?

回答

5

如何:

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

然後,從任何li動手清除了selected上課的時候菜單失去鼠標焦點:

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

這裏有一個工作示例:http://jsfiddle.net/andrewwhitaker/4z3SQ/

+0

感謝花花公子! ;) – 2011-06-05 15:27:32

+0

@Jason:沒問題! – 2011-06-05 16:07:38