Autocomplete with images and custom html code in Jquery UI?
In this post we will give you information about Autocomplete with images and custom html code in Jquery UI?. Hear we will give you detail about Autocomplete with images and custom html code in Jquery UI?And how to use it also give you demo for it if it is necessary.
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 >
<label for="name">Name: </label>
<input id="name">
</div>
Try this……
Hope this code and post will helped you for implement Autocomplete with images and custom html code in Jquery UI?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs