Autocomplete with Images and Custom HTML Code in Jquery UI?

By Hardik Savani January 6, 2023 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 :

Index.html

<title>How To Use Autocomplete</title>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<script>

$(function() {

$( "#name" ).autocomplete({

source: function( request, response ) {

$.ajax({

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

dataType: "json",

data: {

term: request.term

},

success: function( data ) {

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

return {

label: result.id + " - " + result.label,

value: result.id,

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 );

};

});

</script>

<div class="ui">

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

<input id="name">

</div>

Try this......

Shares