Custom data/layout with Autocomplete

Question

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){
                $('.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;
        }
    };

Answer 1

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>');}