Add "see more content to the bottom of the list #autocomplete

[darren_azzopardi]

Hi there,
I’m using jquery autocomplete. The list is quite long so i’ve set a limit to 5 via CSS but i would like still to inform the user with the amount of courses available.
so it would like look this…

• item
• item
• item
• item
• item
• There are 6 more additional courses availble

Below is the code i have:

 
		 $( "#project" ).autocomplete({
               minLength: 0,
               source: projects,
               focus: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                     return false;
               },
               select: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                  $( "#project-id" ).val( ui.item.value );
                  $( "#project-description" ).html( ui.item.desc );
				  
                  return false;
               },
			 
			 source: projects,
               open: function( event, ui ) {
                var len = $('.ui-autocomplete > li').length;
    console.log('Founded '+len+' results');
				   console.log( $( "#this" ).html('There are '+len+' results') ) 
               }
            })
			
			
			 
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li>" )
               .append( item.desc )
               .appendTo( ul );
			 };
			 
			 

Where and how would i add the part that counts the courses to the end of the list?

Thanks