jQuery autocomplete _rendeItem method

→ Are you a new visitor? Please visit the page guidance for new visitors ←

The problem

I remember that back in the past I had problems with a persons autocomplete that I built with jQuery for a client. The request was simple at first, but then he wanted to add pictures in the left of the generated names list.

When the user wrote a letter in the input, from the client side, we call the server for multiple data that was stored in a database. We bring names for the autocomplete and also pictures for persons with ajax. Everything was ok until we wanted to output the pictures in a good looking interface for the user.

The solution

First of all, in order to work, the autocomplete from jQuery needs the inclusion of jQuery.js library and also jQuery-ui.js. You can get this two from this websites:


jQuery UI (user interface)

You can change the way an autocomplete works by changing his autocomplete _rendeItem method, so you can output images in the dropdown, or lists, or uncommon things. This is very useful because you may want to output things such as images, lists, etc…

In order for that to work it is very important to specify in the .append method the data to be formatted with <a> tags in order to be selected like this:

Further reading

If this article was ambiguous, you can read the following links for better understanding, but before digging in the “hidden” methods of jQuery, you should know how a basic autocomplete works.

Basic autocomplete

Using html in autocomplete

Request an article ←