Do you have any other idea in Search engine project example similar with my project .. kindly share with me..
<form method="post" action="@Url.Action("GetSearch","User")">
<div style="float: left; margin-left: 325px;">
<input type="text" id="txtSearch" name="search" style="height: 25px;width: 450px;border: 1px solid #4194FF;">
</div>
<div class="style_search">
<input type="submit" id="btnsearch" name="btnsearch" value="search" />
</div>
</form>
@model Tuple<string>
@{
ViewBag.Title = "Get User";
}
<h2>Search Result</h2>
<table>
<tr>
<td>
Keyword :
@*textbox*@ <input type="text" id="txtSearch" value="@Model.Item1" name="txtsearch" />
@*search*@ <input type="button" value="Search" id="btnSearch" />
@*AllSearch*@<input type="button" value="Get All User" id="btnAllUser" />
</td>
</tr>
<tr>
<td>
<div id="UpdatePanel">
</div>
</td>
</tr>
</table>
@section Scripts{
<script>
$(document).ready(function () {
// This is for Get All Data
$("#btnAllUser").click(function () {
$.ajax({
url: "@Url.Action("GetAllUser","User")",
data: "",
type: "GET",
dataType: "json",
success: function (data) {
loadData(data);
},
error: function () {
alert("Failed! Please try again.");
}
});
});
// this will use for Get Data based on parameter
$("#btnSearch").click(function () {
$.ajax({
url: "@Url.Action("GetUserWithParameter","User")",
data: { prefix: $('#txtSearch').val() },
type: "GET",
dataType: "json",
success: function (data) {
loadData(data);
},
error: function () {
alert("Failed! Please try again.");
}
});
});
function loadData(data) {
// Here we will format & load/show data
var tab = $('<table class="myTable"></table>');
var thead = $('<thead></thead>');
thead.append('<th>Business Name</th>');
thead.append('<th>Category</th>');
thead.append('<th>Description</th>');
tab.append(thead);
$.each(data, function (i, val) {
// Append database data here
var trow = $('<tr></tr>');
trow.append('<td>' + val.BusinessName + '</td>');
trow.append('<td>' + val.BusinessCategory + '</td>');
trow.append('<td>' + val.BusinessDescription + '</td>');
tab.append(trow);
});
$("#UpdatePanel").html(tab);
};
});
</script>
}