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.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to Load Local JSON File Using jQuery
Use the jQuery $.getJSON() Method You...Laravel Blade Section Directive Example
Laravel provides many built-in directive...How to Redirect to Different URLs with .htaccess file
Apache is the first layer of your websit...Node.js MySQL Delete data Database Table
In this tutorial article, we will see ho...Python String Splitlines Method
Python splitlines() is an inbuilt method...