Custom data/layout with Autocomplete
I am trying to append an <li>
at the end of the result set without success. I am in the dark as to the length of the result set, as it can change based on the input, so my counter I have set up only works if the results reach the limit.
The documentation I found on the jquery ui site has been helpful getting me to this point.
I initiated a counter beforehand, and set up conditionals to sort some data based on a window variable. Here is what I am working with:
$('#q').autocomplete({...}).data( "autocomplete" )._renderItem = function( ul, item ) {
if(autoCount == 0){
$('<img src="/ac-top-arrow.png" class="ac-top-arrow" />').appendTo(ul);
}
if(item.window){
var inLi = $('<li class="in-window"></li>')
.data( "item.autocomplete", item )
.append( '<a><img src="'+item.thumb+'" width="55" height="75" class="imgposter" /><div class="movie-info"><h1>'+item.title + '</h1> <span>('+item.year+')</span><br>' + '<h2>Watch now</h2></div></a>');
if($('ul.ui-autocomplete li.in-window').length){
$('.in-window:last').after(inLi);
} else if($('ul.ui-autocomplete li.out-window').length) {
$(inLi).addClass('first-in-win');
$('.out-window:first').before(inLi);
} else {
$(inLi).addClass('first-in-win');
$(inLi).appendTo('ul.ui-autocomplete');
}
}
else {
var outLi = $('<li class="out-window"></li>')
.data( "item.autocomplete", item )
.append( '<a><h1>'+item.title + '</h1> <span>('+item.year+')</span></a>');
if($('ul.ui-autocomplete li.out-window').length)开发者_JAVA技巧{
$('.out-window:last').after(outLi);
} else {
$(outLi).addClass('first-out-win');
$(outLi).appendTo(ul);
}
if(autoCount == 5){
$(outLi).addClass('after-top');
}
}
autoCount++;
if(autoCount == 6){
$('<li class="bottom"><a href="">> See All Results</a></li>').appendTo(ul);
autoCount = 0;
}
};
This accomplishes what I wanted:
'open': function(e, ui) {$('.ui-autocomplete').append('<li class="bottom ui-menu-item"><a href="#" id="see-more-results">> See All Results</a></li>');}
精彩评论