HTML
===============
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<style>
.autofillcon{
position: absolute;
z-index: 10000;
background-color: white;
cursor: pointer;
padding: 8px 3px 8px 12px;
border: 1px solid #dcdcdc;
width: 100%;
display:none;
}
ul li{
padding-bottom: 4px;
}
ul li:hover, ul li:focus {
/*background-color: lightgray;*/
color:lightgray;
}
</style>
<div class="searchBar clearfix">
<div class="container">
<label>Search</label>
<div class="searchBox">
<input type="text" id="idtext" class="inputSearch" placeholder="Search Deal By Location/Deal Name / Category" />
<a href="javascript:void(0)" class="SearchBtn"><img src="~/Content/images/searchIcon.jpg" alt="" /></a>
<ul id="autofile" class="autofillcon">
</ul>
</div>
</div>
</div>
<!--End SearchBar-->
<script>
$(document).ready(function () {
$("#idtext").keyup(function () {
var value = $('#idtext').val();
var length = value.length;
if (length > 2)
{
$.ajax({
type: "post",
url: "Home/AutofillInfo",
data: { 'Searchkey': value, 'searchBy': 'Autofill', },
success: function (response) {
var item = eval("(" + response + ")");
var HTML = '';
for (var i = 0; i < item.length; i++) {
HTML = HTML + "<li onclick=\"$('#idtext').val($(this).text()); $('#autofile').hide().html();\">" + item[i].Remark + "</li>";
}
$('#autofile').show().html(HTML);
}
});
}
});
});
</script>
C#====================
public string AutofillInfo(string Searchkey, string searchBy = null)
{
SearchDeal searchDeal = new SearchDeal();
string response = string.Empty;
List<Deal> deal = searchDeal.DealList(Searchkey, searchBy);
response = JsonConvert.SerializeObject(deal);
return response;
}
===============
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<style>
.autofillcon{
position: absolute;
z-index: 10000;
background-color: white;
cursor: pointer;
padding: 8px 3px 8px 12px;
border: 1px solid #dcdcdc;
width: 100%;
display:none;
}
ul li{
padding-bottom: 4px;
}
ul li:hover, ul li:focus {
/*background-color: lightgray;*/
color:lightgray;
}
</style>
<div class="searchBar clearfix">
<div class="container">
<label>Search</label>
<div class="searchBox">
<input type="text" id="idtext" class="inputSearch" placeholder="Search Deal By Location/Deal Name / Category" />
<a href="javascript:void(0)" class="SearchBtn"><img src="~/Content/images/searchIcon.jpg" alt="" /></a>
<ul id="autofile" class="autofillcon">
</ul>
</div>
</div>
</div>
<!--End SearchBar-->
<script>
$(document).ready(function () {
$("#idtext").keyup(function () {
var value = $('#idtext').val();
var length = value.length;
if (length > 2)
{
$.ajax({
type: "post",
url: "Home/AutofillInfo",
data: { 'Searchkey': value, 'searchBy': 'Autofill', },
success: function (response) {
var item = eval("(" + response + ")");
var HTML = '';
for (var i = 0; i < item.length; i++) {
HTML = HTML + "<li onclick=\"$('#idtext').val($(this).text()); $('#autofile').hide().html();\">" + item[i].Remark + "</li>";
}
$('#autofile').show().html(HTML);
}
});
}
});
});
</script>
C#====================
public string AutofillInfo(string Searchkey, string searchBy = null)
{
SearchDeal searchDeal = new SearchDeal();
string response = string.Empty;
List<Deal> deal = searchDeal.DealList(Searchkey, searchBy);
response = JsonConvert.SerializeObject(deal);
return response;
}
No comments:
Post a Comment