Jquery UI Autocomplete- How to format results AND add button at end? - jquery-ui

Question

I've figured out how to change the formatting on my results:
https://github.com/salmanarshad2000/demos/blob/v1.0.4/jquery-ui-autocomplete/custom-html-in-dropdown.html
And I've figured out how I can add a link to the bottom of the results:
Jquery Auto complete append link at the bottom
What I can't figure out is how to do both at the same time.
The closest that I've come is the following:
$( "#search1" ).autocomplete({
source: products,
minLength: 3,
select: function( event, ui ) {
event.preventDefault();
},
focus: function(event, ui) {
event.preventDefault();
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
console.log(ul.content)
var $div = $("<div></div>");
$("<img style='height:76px;'>").attr("src", item.image).appendTo($div);
$("<span></span>").text(item.label).appendTo($div);
($div).append( "<a href='https://google.com'>Click Me</a>" )
return $("<li></li>").append($div).appendTo(ul);
};
The problem is that adds the link to each individual returned result, rather than slamming it onto the end of the list.
I've tried various incarnations of wrapping the link (li, div, etc) but nothing's working.
What do I need to do to get a link as the last thing on the list?
JS Fiddle: http://jsfiddle.net/spgbq6w7/13/

Answer 1

Consider the following code.
Working Example: http://jsfiddle.net/Twisty/wur8vok9/23/
HTML
Search: <input id="search1">
JavaScript
var products = [{
value: "MS-Word",
label: "Microsoft Word 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/4/4f/Microsoft_Word_2013_logo.svg"
},
{
value: "MS-Excel",
label: "Microsoft Excel 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/8/86/Microsoft_Excel_2013_logo.svg"
},
{
value: "MS-Outlook",
label: "Microsoft Outlook 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Microsoft_Outlook_2013_logo.svg"
},
{
value: "MS-PowerPoint",
label: "Microsoft Word 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/b/b0/Microsoft_PowerPoint_2013_logo.svg"
},
{
value: "MS-Access",
label: "Microsoft Access2013",
image: "https://upload.wikimedia.org/wikipedia/commons/3/37/Microsoft_Access_2013_logo.svg"
},
{
value: "Adobe-PSP",
label: "Adobe Photoshop CC",
image: "https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg"
},
{
value: "Adobe-LR",
label: "Adobe Lightroom CC",
image: "https://upload.wikimedia.org/wikipedia/commons/5/56/Adobe_Photoshop_Lightroom_Classic_CC_icon.svg"
},
{
value: "Adobe-PRM",
label: "Adobe Premiere Pro CC",
image: "https://upload.wikimedia.org/wikipedia/commons/5/58/Adobe_Premiere_Pro_CS6_Icon.png"
},
{
value: "Adobe-ACR",
label: "Adobe Acrobat",
image: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Adobe_Acrobat_v8.0_icon.svg"
},
{
value: "Adobe-ILS",
label: "Adobe Illustrator CS6",
image: "https://upload.wikimedia.org/wikipedia/commons/d/d8/Adobe_Illustrator_Icon_CS6.png"
}
];
$(function() {
$("#search1").autocomplete({
source: products,
minLength: 3,
open: function() {
var $li = $("<li>");
var $link = $("<a>", {
href: "#",
class: "see-all"
}).html("See All Results").click(function(e) {
e.preventDefault();
$("#search1").autocomplete("option", "minLength", 0);
$("#search1").autocomplete("search", "");
}).appendTo($li);
$li.appendTo($('.ui-autocomplete'));
},
select: function(event, ui) {
event.preventDefault();
$("#search1").autocomplete("option", "minLength", 3);
},
focus: function(event, ui) {
event.preventDefault();
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
console.log(ul.content)
var $div = $("<div>").css("position", " relative");
$("<img>", {
src: item.image
}).css("height", "38px").appendTo($div);
$("<span>").css({
position: "absolute",
top: 0,
display: "inline-block",
"margin-left": "3px"
}).text(item.label).appendTo($div);
return $("<li>").append($div).appendTo(ul);
};
});
So you're using _renderItem() properly. I removed the Link from here based on the example you linked to. I moved this to the open callback as is shown in the example. I also switched some of your code. It wasn't wrong, I just prefer this method.
So the items get rendered so that the image and label show as desired. The the open call back adds a final link item that causes the a search for all items. See more: http://api.jqueryui.com/autocomplete/#method-search
Can be called with an empty string and minLength: 0 to display all items.
When an item is selected, the preferred minLength is returned to ensure that if the user starts a new search, it operates the same way it did the first time.
Update
http://jsfiddle.net/Twisty/wur8vok9/40/
Minor cleanup and better separation of code and style.
Hope this helps.