5
Autocomplete Search with Image and Custom HTML in jQuery
source link: https://www.laravelcode.com/post/autocomplete-search-with-image-and-custom-html-in-jquery
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Autocomplete Search with Image and Custom HTML in jQuery
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.
Author : Harsukh Makwana
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]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK