asp.net模拟百度搜索框自动提示效果_ASP.NET教程

导读：今天分享一个模拟百度搜索框自动提示效果的功能代码，在开发经常遇到的，拿来给大家参考参考，不做的地方请指教。

今天分享一个模拟百度搜索框自动提示效果的功能代码，在开发经常遇到的，拿来给大家参考参考，不做的地方请指教。

AutoComplete_Get.aspx界面代码：

复制代码代码如下：

<%@ Page AutoEventWireup="true" CodeBehind="AutoComplete_Get.aspx.cs"
Inherits="WebApplicationTest.AutoComplete_Get" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>使用Get方式模拟自动完成的效果</title>
<style>
.highLight { background: #ccc; }
</style>
<script src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script>
var selectedItem = null;
$(function ()
{
var dv = $("#dvComplete");
$("#txtInput").keyup(function (event)
{
var code = event.keyCode;
if (code <= 40 && code != 8) { //event.keyCode在40(包含40)以下的，均为特殊字符.
if (code == 38 && selectedItem != null) {
//用户按上键
setSelectedItem(selectedItem - 1);
event.preventDefault();
return;
}
else if (code == 40 && selectedItem != null) {
//用户按下键
setSelectedItem(selectedItem + 1);
event.preventDefault();
return;
}
else if (code == 27 && selectedItem != null) {
//用户摁下Esc键.
setSelectedItem(null);
}
else { event.preventDefault(); return; }
}
dv.show();
var ff = $(this).val();
var com = $("#dvComplete");
$.get("HelpComplete.ashx", { "action": ff }, function (responseText, responseStatu)
{
var date = $.parseJSON(responseText);
var complete = $("#dvComplete");
complete.empty();
if (date.length) {
$.each(date, function (index, v)
{
var v = date[index].CompleteText;
$("
").text(v).appendTo(com).mouseover(function ()
{
setSelectedItem(index);
}).attr({ "style": "cursor:pointer; width:200px;" }).click(function (eve)
{
$("#txtInput").val($(this).text());
eve.preventDefault();
dv.hide();
});
});
setSelectedItem(0);
} else {
setSelectedItem(null);
}
});
}).keypress(function (eve)
{
//摁下回车后，将选中的文本传递到文本框中.
if (eve.keyCode == 13 && selectedItem != null) {
//用户摁下回车
var value = dv.find("li").eq(selectedItem).text();
$("#txtInput").val(value);
setSelectedItem(null);
eve.preventDefault();
dv.hide();
return;
}
});
});
//自动匹配的推荐项样式.
function setSelectedItem(item)
{
selectedItem = item;
var dv = $("#dvComplete");
if (selectedItem == null) {
dv.hide();
return;
}
selectedItem = isNaN(selectedItem) ? 0 : selectedItem;
if (selectedItem < 0) {
selectedItem = 0;
}
var maxItemIndex = dv.find("li").length;
if (selectedItem >= maxItemIndex) {
selectedItem = maxItemIndex - 1;
}
//alert(selectedItem);
dv.find("li").removeClass("highLight").eq(selectedItem).addClass("highLight");
dv.show();
}
</script>
</head>
<body>
<form runat="server">
<div>
输入内容自动匹配模式：<br />
<asp:TextBox AutoComplete="off" runat="server"></asp:TextBox>
</div>
<div>
</div>
</form>
</body>
</html>

HelpComplete.ashx处理程序代码：

复制代码代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
namespace WebApplicationTest
{
///
/// HelpComplete 的摘要说明
///
public class HelpComplete : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
List<CompleteTest> tList = new List<CompleteTest>()
{
#region MyRegion
new CompleteTest(){ CompleteText="http"},
new CompleteTest(){ CompleteText="auto"},
new CompleteTest(){ CompleteText="morning"},
new CompleteTest(){ CompleteText="afternoon"},
new CompleteTest(){ CompleteText="context"},
new CompleteTest(){ CompleteText="text"},
new CompleteTest(){ CompleteText="plain"},
new CompleteTest(){ CompleteText="hello"},
new CompleteTest(){ CompleteText="word"},
new CompleteTest(){ CompleteText="handler"},
new CompleteTest(){ CompleteText="config"},
new CompleteTest(){ CompleteText="response"},
new CompleteTest(){ CompleteText="write"},
new CompleteTest(){ CompleteText="request"},
new CompleteTest(){ CompleteText="class"},
new CompleteTest(){ CompleteText="public"},
new CompleteTest(){ CompleteText="protect"},
new CompleteTest(){ CompleteText="void"},
new CompleteTest(){ CompleteText="summary"},
new CompleteTest(){ CompleteText="get"},
new CompleteTest(){ CompleteText="post"},
new CompleteTest(){ CompleteText="ajax"},
new CompleteTest(){ CompleteText="help"},
new CompleteTest(){ CompleteText="dbhelp"},
new CompleteTest(){ CompleteText="car"},
new CompleteTest(){ CompleteText="dictionary"},
#endregion
};
string action = context.Request["action"];
if (action != "")
{
var v = (from c in tList
where c.CompleteText.StartsWith(action.ToLower())
select c).Select(p => p);
JavaScriptSerializer jss = new JavaScriptSerializer();
//将list集合转换成JSON字符串，并返回
string result = jss.Serialize(v.ToList());
context.Response.Write(result);
}
}
public bool IsReusable
{
get
{
return false;
}
}
class CompleteTest
{
public string CompleteText { get; set; }
}
}
}

全站搜索

asp.net模拟百度搜索框自动提示效果

最新推荐

本周排行