<html>
<head runat="server">
<title>Autocomplete Textbox With Images In ASP.NET With the Database using JQuery AJAX</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtInput").on("keyup", function () {
if (this.value.length > 0) {
let SearchObject = { Name: $("#txtInput").val() }
$.ajax({
type: "POST",
url: "Default2.aspx/Search",
data: JSON.stringify(SearchObject),
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$("#divTags").show();
},
success: function (data) {
data=JSON.parse(data.d)
let output = data.map(i => "<tr><td class='select'><img width='50px' height='60px' src="+i.ImagesPath+" /></td> <td class='select'>" + i.Name + "</td></tr></br>");
$("#output").html(output);
},
error: function (errorMessage) {
$("#divTags").hide();
alert(errorMessage)
},
complete: function () {
}
});
}
})
$(document).on("click", ".select" , function() {
if($(this).html()!="")
{
$("#txtInput").val($(this).html());
}
else{
$("#txtInput").val('');
}
$("#divTags").hide();
});
});
</script>
<body>
<form id="form1" runat="server">
<input type="text" id="txtInput" placeholder="Search" style="padding: 10px; width: 250px" />
<div id="divTags" style="position: absolute; z-index: 999; background: rgb(255, 255, 255); border: 1px solid black; height: 100px; width: 270px; overflow: auto; display: none;">
<table style="border: 1px thick black">
<tbody id="output" style='cursor: pointer'>
</table>
</div>
</form>
</body>
</html>