经常有朋友问我,Google,土豆网等那各种辅助输入功能是如何实现...我是用的ajax实现的.描述如下:
一 创建输入页面 包含如下文本框
<input id="txtSearch" style="width: 348px" onkeyup ="GetSearchString();" type="text" />
用户键盘输入时,触发onkeyup事件
二 在js文件中创建ActiveXObject 并把txtSearch中已经输入的值日传递到CkNodifyNo.ashx页面 一座筛选,代码
var xmlHttp;
function CreateXmlHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
}
function GetSearchString()
{
var StrSearch=document.getElementById("txtSearch").value;
if(StrSearch.length>0)
{
CreateXmlHttpRequest();
xmlHttp.open("GET","Hander/CkNodifyNo.ashx?SearchStr="+StrSearch,true);
//"/"+document.getElementById('drpRoomNum').value,true)
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
}------------------------①此为js的一部分 另一部分在下面会贴出来的
三 CkNodifyNo.ashx页面做出筛选,然后然会筛选结果 代码如下:
<%@ WebHandler Language="C#" Class="CkNodifyNo" %>
using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
public class CkNodifyNo : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
//===============
//睲埃絯
context.Response.Expires = -1;
if (!object.Equals(null, context.Request.QueryString["SearchStr"]))
{
string sth = context.Request.QueryString["SearchStr"].ToString();
context.Response.ContentType = "text/plain";
//context.Response.ContentType = "text/html";
context.Response.Write(getString(sth));
//context.Response.Write("OK");
context.Response.End();
}
else
{
context.Response.ContentType = "text/html";
context.Response.Write("NO");
context.Response.End();
}
}
private string getString(string sth)
{
string RetString = string.Empty;
switch (sth) //为了方面这里没有操作数据库,写死了返回的字符串
{
case "t":
return "the^tea^teacher^tee^tett^tesbook^tesving^test^test programe";
break;
case "te":
return "tea^teacher^tee^tett^tesbook^tesving^test^test programe";
break;
case "tes":
return "tesbook^tesving^test^test programe";
break;
case "test":
return "test programe";
break;
default:
return "$#@$";
break;
}
}
public bool IsReusable {
get {
return false;
}
}
}
四 在js页面接受然会值,并在页面上现实
//HttpRequest回調函數
function callback()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
// try
// {
//
// var isOK= xmlHttp.responsetext.split('/');
// if(isOK[0]=='yes')
// {
// document.getElementById("txtRoomID").value=isOK[1];
// }
if(xmlHttp.responsetext.length>0 )
{
if(xmlHttp.responsetext!='$#@$')
{
var StrLen= xmlHttp.responsetext.split('^');
// document.getElementById('divTest').innerText=xmlHttp.responsetext;
var innerText;
innerText="<table border='0' cellpadding='0' cellspacing='0'>";
for(var i=0;i<StrLen.length;i++)
{
innerText+="<tr>";
innerText+="<td>";
innerText+=" <input id='"+i+"' type='text' onclick='getValue(this);' value='"+StrLen[i]+"' />";
innerText+="</td>";
innerText+="</tr>";
}
innerText+="</table>";
document.getElementById('divTest').innerHTML=innerText;
}
else
{
document.getElementById('divTest').HtmlText="tte";
document.getElementById('divTest').style.display="";
}
}
}
}
}
function getValue(obj)
{
document.getElementById("txtSearch").value=obj.value;
document.getElementById('divTest').style.display="none";
}------------------------------② 此为js的第另一部分 把 js ①② 放在一个js文件即可
大功搞成 效果图:
