jQuery autocomplete et d'événements de focus
Bonjour à tous,
J'ai des problèmes pour jouer avec jQuery UI autocomplete widget des événements.
Je tiens à ajouter une classe personnalisée pour le parent <li>
de l'élément sélectionné.
L'généré balisage ressemble à :
<li class="result">
<a><span></span></a>
</li>
Lorsqu'un élément est le foyer, jQuery ajouter la classe .ui-state-hover
à la <a>
Comment puis-je ajouter une classe .selected
pour le parent <li>
?
Je suis en train de faire à partir d'un focus
événement, mais je ne sais pas comment accéder à la mère <li>
.
J'ai regardé le source de jQuery UI et trouvé où et comment le .ui-state-hover
est appliqué, mais ne l'aide pas.
Voici mon code pour la saisie semi-automatique.
/**
* 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;
})
Un ninja peut vous aider ?
OriginalL'auteur Jason Lince | 2011-06-05
Vous devez vous connecter pour publier un commentaire.
Comment sur:
Ensuite, pour supprimer le
selected
classe duli
s lorsque le menu perd le focus de la souris:Voici un exemple de travail: http://jsfiddle.net/andrewwhitaker/4z3SQ/
OriginalL'auteur Andrew Whitaker