Solution -: @model IEnumerable<NewMedProduct.Models.Product>
<br /><br />
<div class=”container”>
<b>Search By : </b>
<select id=”SearchBy”>
<option value=”Name”>Name</option>
<option value=”ID”>ID</option>
</select><br /><br />
@Html.TextBox(“Search”)
<input type=”hidden” id=”hfCustomer” name=”CustomerId” />
@Html.AntiForgeryToken()
<input type=”submit” id=”searchBtn” value=”Search” /><br /><br />
<table class=”table table-bordered”>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Unit</th>
<th>Quintity</th>
<th>MRP</th>
</tr>
</thead>
<tbody id=”DataSearching”></tbody>
</table>
</div>
<script src=”~/Scripts/jquery-1.10.2.min.js”></script>
<link rel=”stylesheet” href=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>
<script src=”~/Scripts/autocomplete-0.3.0.min.js”></script>
<script type=”text/javascript”>
$(“#searchBtn”).click(function () {
var searchBy = $(“#SearchBy”).val();
var searchValue = $(“#Search”).val();
$.post(‘@Url.Action(“GetSearchingData”, “Default”)’, { searchBy: searchBy, searchValue: searchValue },
function (result) {
$(‘#DataSearching’).html(”);
if (result.length == 0) {
SetData.append(‘<tr style=”color:red”><td colspan=”3″>No Match Data</td></tr>’);
}
else {
$.each(result, function (index, value) {
var Data = ‘<tr>’ +
‘<td>’ + value.ID + ‘</td>’ +
‘<td>’ + value.Name + ‘</td>’ +
‘<td>’ + value.Description + ‘</td>’ +
‘<td>’ + value.Unit + ‘</td>’ +
‘<td>’ + value.Quintity + ‘</td>’ +
‘<td>’ + parseFloat(value.MRP).toFixed(2) + ‘</td>’ +
‘</tr>’;
$(‘#DataSearching’).append(Data);
});
}
});
});
$(“#Search”).autocomplete({
source: function (request, response) {
$.ajax({
url: “http://localhost:62664/Default/GetSearchingData”,
type: “POST”,
dataType: “json”,
data: “{searchValue: ‘” + request.term + “‘ }”,
contentType: “application/json; charset=utf-8”,
success: function (data) {
debugger;
response($.map(data, function (item) {
return item.Name;
}))
},
})
},
select: function (event, ui) {
$(‘#Search’).val(ui.item.label);
$(“#searchBtn”).click();
return false;
}
});
</script>
