樣式:
<style type="text/css">
.autocomplete{width:200px;border:1px solid #999;background:white;position:absolute;overflow:hidden; list-style-type:none; padding-left:0;margin-left:0px; margin-top:0;}</style>
JS:(Jquery)
<script type="text/javascript" language="javascript">
var $autocomplete = $("<ul class='autocomplete'></ul>").hide().insertAfter("#<%=search.ClientID %>");
$("#<%=search.ClientID %>").keyup(function () {
$.post("Handler.ashx", { "searchText": $("#<%=search.ClientID %>").val() }, function (data) {
if (data.length) {
$autocomplete.empty();
var arr = data.substring(0, data.length - 1).split(',');
$.each(arr, function (index, term) {
$("<li></li>").text(term).appendTo($autocomplete).mouseover(function () {
$(this).css("background", "green");
}).mouseout(function () {
$(this).css("background", "white");
})
.click(function () {
$("#<%=search.ClientID %>").val(term);
$autocomplete.hide();
});
});
$autocomplete.show();
}
});
}).blur(function () {
setTimeout(function () {
$autocomplete.hide();
}, 500);
});
</script>
AjAx:
public void ProcessRequest (HttpContext context) {
BLL.Hotel bHotel = new BLL.Hotel();
context.Response.ContentType = "text/plain";
string teststr = context.Request.Form["searchText"];
DataTable dt = bHotel.GetHotelName(teststr).Tables[0];
string str = null;
for (int i = 0; i < dt.Rows.Count; i++)
{
str += dt.Rows[i]["HotelName"]+",";
}
context.Response.Write(str);
}