Autocomplete with images and custom html code in Jquery UI?

By Hardik Savani | January 8, 2016 | Category : PHP jQuery

In your website you require to set auto-complete user full-name with image. generally you use auto-complete with name, email, message etc text but if you want to add image or your own html code like user html tag in autocomplete then you have to use "_renderItem" in jquery ui. how you will create i give you example of html file :


<title>How To Use Autocomplete</title>

<link rel="stylesheet" href="">

<script src=""></script>

<script src=""></script>


$(function() {

$( "#name" ).autocomplete({

source: function( request, response ) {


url: "http://yourhostpath/getdata",

dataType: "json",

data: {

term: request.term


success: function( data ) {

response( $.map( data.results, function( result ) {

return {

label: + " - " + result.label,


imgsrc: result.image






}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {

return $( "<li></li>" )

.data( "item.autocomplete", item )

.append( "<a>" + "<img style='width:25px;height:25px' src='" + item.imgsrc + "' /> " + item.label+ "</a>" )

.appendTo( ul );




<div class="ui">

<label for="name">Name: </label>

<input id="name">


Try this......

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: