today i will show you on your website to set up an autocomplete jquery for example with a picture. usually, using autocomplete in jquery by name, email, message, etc.
but if you want to add your own images or HTML code like the user's HTML tag to auto-complete you must use "_renderItem" in the jquery UI. how to create I give you an example of an HTML file:
Example:
<html>
<head>
<title>Autocomplete With Images And Custom HTML Code Using Jquery UI?</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<h1>javascript autocomplete textbox from database - PHP Coding Stuff</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>
Thanks.......