注意事项：要使用jQuery首先要把它的包引用进来（ <script type="text/javascript" language="javascript" src="js/jquery-1.2.3.js"></script>）
本功能实现的原理简述：通过输入框的keyup事件，在后台把输入框当前的数据传入后台进行处理（以json格式传输），本例的后台处理文件是一个ashx文件。后台得到json数据后从数据库里取数据，然后回传到前台；前台显示的是一个类似百度和谷歌的下拉框，本例是这样实现的，把从后台传过来的每一个记录，通过jQuery动态生产一个<li></li>,然后把这些li放到一个div里取，再给这些li设置CSS，然后根据CSS就可以选择记录。
请看代码：
前台：
js文件：
<script language="javascript" type="text/javascript"> $(function(){
$("#keyword").bind("keyup",triggerAjax).bind("blur",input_blur);
$("body").click(li_click); //很奇怪，在dvResult低边框以下click时不会触发li_click事件，这个问题还需改进
}); function triggerAjax() $.get("AutoComplete.ashx",SendingData(),callback);
} function input_blur() if($(".MouseOverLi").size()>0)//判断是否选择了项 $("#keyword").val($(".MouseOverLi").html());//选了某一项，则把它的值赋给输入框
$("#dvResult").fadeOut("3000"); // 隐藏div } function li_click() //$("#keyword").val($(this).html());
$("#dvResult").fadeOut("3000"); // 隐藏div function callback(data) $("#dvResult").slideDown("3000");
if(data!="") $("#dvResult").html(""); //清空前一次返回的数据
var keys = data.split(";"); //把返回的字符串（以；分割）转变成数组
var len = keys.length;
for(count = 0;count<len-1;count++) $("#dvResult").append("<div class='item'>"+keys[count]+"</div>"); $("#dvResult").addClass("HasDataDiv");
$(".item").mouseover(function(){$(this).addClass("MouseOverLi");});
$(".item").mouseout(function(){$(this).removeClass("MouseOverLi");}); //选中值
$(".item").click(function(){
$("#keyword").val($(".MouseOverLi").html());//选了某一项，则把它的值赋给输入框
$("#dvResult").fadeOut("2000"); // 隐藏div }
else $("#dvResult").html($("#keyword").val()+" 不存在！"); } // 向服务器端发送要处理的数据
function SendingData() var keyword,table,field,_json; _keyword = $("#keyword").val(); //检索用到的关键字
_table = "Users"; //数据库名称
_field = "userName"; //要检索的字段 _json = {keyword:_keyword,table:_table,field:_field}; return _json; }
</script>
HTML：
<body style="text-align: center">
<form id="form1" runat="server">
<table style="padding-top: 5px" cellpadding="0" cellspacing="0">
<tr>
<td style="height:5px"></td>
</tr>
<tr valign="top">
<td>
<input id="keyword" name="keyword" type="text" />
</td>
<td>
<input id="Button1" type="button" value="搜索" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="dvResult" style="text-align:left; height:100px; overflow:auto;"> </div>
</td>
</tr>
</table>
</form>
</body>
public class AutoComplete : IHttpHandler public AutoComplete() //
//TODO: 在此处添加构造函数逻辑 }
public void ProcessRequest(HttpContext context) context.Response.ContentType = "text/plain";
if (context.Request.Params["keyword"] != null && context.Request.Params["table"] != null && context.Request.Params["field"] != null)
{
string keywordTemp=context.Request.Params["keyword"].ToString();
string tableTemp=context.Request.Params["table"].ToString();
string fieldTemp=context.Request.Params["field"].ToString();
string returnStr = "";
returnStr = AutoCompleteGetResult.GetResult(keywordTemp, tableTemp, fieldTemp);
context.Response.Clear();
context.Response.Write(returnStr);
context.Response.End(); else context.Response.Clear();
context.Response.Write("自动提示无法启动");
context.Response.End(); }
public bool IsReusable get return true; }
}
public class AutoCompleteGetResult public AutoCompleteGetResult() //
//TODO: 在此处添加构造函数逻辑 }
public static string GetResult(string keyword, string tableName, string field)
{ string[] key = keyword.Split(' ');
StringBuilder sql = new StringBuilder(); sql.Append("SELECT " + field + " FROM " + tableName + " where 1=1");
for (int i = 0; i < key.Length; i++) sql.Append(" and " + field + " like '%" + key[i] + "%'");
}
DataTable dt = DBClass.ExecuteDataSet(sql.ToString()).Tables[0]; string returnStr = "";
try for (int i = 0; i < dt.Rows.Count; i++) returnStr += Convert.ToString(dt.Rows[i][field]) + ";"; catch { }
return returnStr; }
