Today I will show you on your website to set an autocomplete jquery example with an image. generally, you utilize autocomplete in jquery with designation, email, message, etc. text but if you optate to integrate images or your own HTML code like utilizer HTML tag in autocomplete then you have to utilize "_renderItem" in jquery UI. how you will engender I give you an example of an HTML file :
<html>
<head>
<title>Autocomplete With Images -HackTheStuff</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<h1>Autocomplete With Images -HackTheStuff</h1>
<div class="ui">
<label for="name">Name: </label>
<input id="name">
</div>
<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://yourwebsitepath/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>
<body>
<html>
i hope you like this.
