Jquery Auto completely adds the link below

Question

I am using jQuery auto-complete plugin in my web project. I want to show 3 elements, and after that I want to add the “see all results” link below.

I tried with the following code.

$( ".grid-search-box" ).autocomplete({ minLength: 0, source: temp, focus: function( event, ui ) { $( ".grid-search-box" ).val( ui.item.value ); return false; }, select: function( event, ui ) { $( ".grid-search-box" ).val( ui.item.value ); return false; } }).data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a><span class='" + item.status + "'></span>" + item.value + "</a>" ) .appendTo( ul ); }; 

Can anyone suggest me how to solve it.

Answer 1

Here is a demo,

http://jsfiddle.net/muthkum/vqwBP/105/

Hope you will understand how to implement.

Update: I was able to update the code,

 $( ".grid-search-box" ).autocomplete({ minLength: 0, source: function(request, response) { var results = $.ui.autocomplete.filter(temp, request.term); response(results.slice(0, 3)); //show 3 items. }, open: function(event, ui) { $('.ui-autocomplete').append('<li><a href="javascript:alert(\'redirecting...\')">See All Result</a></li>'); //See all results }, focus: function( event, ui ) { $( ".grid-search-box" ).val( ui.item.value ); return false; }, select: function( event, ui ) { $( ".grid-search-box" ).val( ui.item.value ); return false; } }).data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a><span class='" + item.status + "'></span>" + item.value + "</a>" ) .appendTo( ul ); }; 

Demo: http://jsfiddle.net/muthkum/vqwBP/106/