JQuery UI autocomplete - Image In overlay of results, not outside as a demo

Question

I have jQueryUI code for later autocomplete ....

$(function() { var updates = [ { value: "URL", label: "some text", icon: "jqueryui_32x32.png"}; ]; $("input#autocomplete").autocomplete({ delay: 10, minLength: 0, source: updates, select: function( event, ui ) { window.location.href = ui.item.value; } }); }); 

And it essentially searches the site where the results are direct links. I would like to add images that are locally stored in the results in order to enhance the simulated facebook. I was not lucky and saw questions before directing users to the demonstration of "user data". Here is one such question ...

How to add images to the results of this jQueryUI autocomplete plugin?

I know or this is a demo ...

http://jqueryui.com/demos/autocomplete/#custom-data

.. but there is no indication as to how this could be done. In the DETAIL on formatting the results, it is superimposed itself / by placing the images in the overlay. I don’t get it here. I dismembered this demonstration all day so as not to show anything. This should be easy, because all data and images are local. All of them are in the same folder as this search. There is no information about PHP or the database .....

I really, really hate the jQuery interface because of how poorly documented it is and how unjustifiably complicated it is ... All the configuration things are in multiple files, etc. I used to use the JÖRN ZAEFFERER plugin, which accepted simple HTML tags. It worked fine until IE8 ......

Any understanding of this is much appreciated.

Answer 1

The recommended way to change the display of list items in the list of offers for auto-complete is to override the _renderItem method. Inside this method you have to do a few things:

• Add li to transferred to ul . li must contain the tag a .
• Associate the correct data with this li
• It is true that li .

In addition, you can execute any custom formatting logic that you need. Here is how I would update your code:

 $("input#autocomplete").autocomplete({ delay: 10, minLength: 0, source: updates, select: function( event, ui ) { window.location.href = ui.item.value; } }).data("autocomplete")._renderItem = function (ul, item) { return $("<li />") .data("item.autocomplete", item) .append("<a><img src='" + item.icon + "' />" + item.label + "</a>") .appendTo(ul); }; 

As you can see, adding an img tag was as easy as putting it in the a tag mentioned above. Keep in mind that you can also apply CSS rules to elements that you add.

Here is a complete example that uses the StackOverflow API to search for users and shows their avatars to their left.

---

Update . As of jQueryUI 1.10, you need to access widget data for autocomplete using .data("uiAutocomplete") (thanks for noticing @Danny's problem). With that in mind, here's an example working in 1.10:

 $("input#autocomplete").autocomplete({ delay: 10, minLength: 0, source: updates, select: function( event, ui ) { window.location.href = ui.item.value; } }).data("uiAutocomplete")._renderItem = function (ul, item) { return $("<li />") .data("item.autocomplete", item) .append("<a><img src='" + item.icon + "' />" + item.label + "</a>") .appendTo(ul); }; 

Example: http://jsfiddle.net/K5q5U/249/