一、 封装的JS文件
//********************************************************//创建日期: 2009-03-10//作 者: oloen//內容说明: 自动完成JS类
//用法：
// var auto = new autoComplete(客户端ID);// auto.Init(document.all.客户端ID);//********************************************************//自动完成function autoComplete(id){var me = this;//自动完成绑定控件客户端ID me.AutoCompleteControlID me.handle = null me.DivResult ;me.currentIndex = -1;me.LastIndex = -1;me.requestObj;me.CurrentTD = '';if(id != null && typeof(id) != undefined) me.AutoCompleteControlID = id;if(me.DivResult == null||typeof(me.DivResult)=="undefined"){me.DivResult = document.createElement("div");var parent = document.getElementById(me.AutoCompleteControlID).parentElement;if(typeof(parent)!="undefined"){parent.appendChild(me.DivResult);}}this.Init = function(obj){me.handle = obj me.AutoCompleteControlID = obj.id}this.Auto = function(){me.DivResult.style.position = "absolute";me.DivResult.style.top = me.handle.getBoundingClientRect().top + 17;me.DivResult.style.left = me.handle.getBoundingClientRect().left;me.DivResult.style.width = me.handle.width;me.DivResult.style.height = 20;me.DivResult.style.backgroundColor = "#ffffff";//如果按下 向上, 向下 或 回车if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13){me.SelectItem();}else{//恢复下拉选择项为 -1 currentIndex = -1;if(window.XMLHttpRequest){me.requestObj = new XMLHttpRequest();if(me.requestObj.overrideMimeType) me.requestObj.overrideMimeType("text/xml");}else if(window.ActiveXObject){try{me.requestObj = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){me.requestObj = new ActiveXObject("Microsoft.XMLHTTP");}}if(me.requestObj == null) return;me.requestObj.onreadystatechange = me.ShowResult;me.requestObj.open("GET", "../Common/AutoComplete.aspx?InputValue=" + escape(me.handle.value), true);me.requestObj.send();}}this.ShowResult = function(){if (me.requestObj.readyState == 4){me.DivResult.innerHTML = me.requestObj.responseText;me.DivResult.style.display = "";}}this.SelectItem = function(){//结果var result = document.getElementById("Tmp_AutoComplete_tblResult");if (!result) return;if(result.rows[me.LastIndex] != null){result.rows[me.LastIndex].style.backgroundColor = "#FFFFFF";result.rows[me.LastIndex].style.color = "#000000";}var maxRow = result.rows.length;//向上if (event.keyCode == 38 && me.currentIndex > 0) me.currentIndex--;//向下if (event.keyCode == 40 && me.currentIndex me.currentIndex++;//回车if (event.keyCode == 13){me.Select() me.InitItem();return;}if(result.rows[me.currentIndex]!=undefined){//选中颜色result.rows[me.currentIndex].style.backgroundColor = "#3161CE";result.rows[me.currentIndex].style.color = "#FFFFFF";}me.DivResult.style.height = maxRow * 15;me.LastIndex = me.currentIndex;}this.Select = function(){var result = document.getElementById("Tmp_AutoComplete_tblResult");if (!result) return;var ReturnValue = result.rows[me.currentIndex].ReturnValue;if(ReturnValue != undefined){me.DivResult.style.display = 'none';//设置页面值ReturnAutoComplete(ReturnValue);}}this.Hide = function(){me.DivResult.style.display = 'none';me.currentIndex = -1;}this.InitItem = function(){me.DivResult.style.display = 'none';me.DivResult.innerHTML = "";me.currentIndex = -1;}me.DivResult.onclick = function(){me.Auto();}document.getElementById(me.AutoCompleteControlID).onclick = function(){me.Auto();}document.getElementById(me.AutoCompleteControlID).onkeyup = function(){me.Auto();}document.getElementById(me.AutoCompleteControlID).onkeydown = function(){if (event.keyCode == 13){me.Select() me.InitItem();return;}}document.getElementById(me.AutoCompleteControlID).onblur = function(){me.Hide();}}2 后台查询页面using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;//using System.Data.SqlClient;//********************************************************//创建日期: 2009-03-10//作 者: oloen//內容说明: 自动完成后台查询页面//********************************************************////// 自动完成后台查询页面/// public partial class Common_AutoComplete : System.Web.UI.Page{const string tbStyle = @"";////// 过滤条件/// string Filter = string.Empty;////// 查询值/// string InputValue = string.Empty;////// 自动完成类别/// 目前只支持 售楼系统 UnitNo 查询/// string Type = string.Empty;////// 返回结果字符/// string ReturnStr = string.Empty;private void Page_Load(object sender, System.EventArgs e){switch (Type.ToLower()){case "psunit":default:AutoPSUnitNo();break;}Response.Clear();Response.ContentType = "text/xml";Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");Response.Write(ReturnStr);Response.End();}protected override void OnInit(EventArgs e){base.OnInit(e);Filter = Request.QueryString["Filter"] ?? "";InputValue = Request.QueryString["InputValue"] ?? "";InputValue.Replace("'","''");}////// 售楼系统房间编号自动完成/// void AutoPSUnitNo(){if (!string.IsNullOrEmpty(InputValue)){ReturnStr = @"";#region 数据库操作//string Sql = string.Format(@"SELECT TOP 10 UnitID,UnitNo,ProjectNo,PhaseNo,BlockNo FROM View_PS_Unit WHERE UnitNo LIKE '%{0}%'", InputValue);//using (SqlDataReader sdr = DataAccessHelper.ExecuteReader(Sql) as SqlDataReader)//{// if (sdr == null || !sdr.HasRows)// {// ReturnStr = string.Empty;// return;// }// while (sdr.Read())// {// string td = string.Format(@"{0}", sdr["ProjectNo"].ToString());// //td += string.Format(@"{0}", sdr["PhaseNo"].ToString());// //td += string.Format(@"{0}", sdr["BlockNo"].ToString());// td += string.Format(@"{0}", sdr["UnitNo"].ToString());// ReturnStr += string.Format(@"{2}", sdr["UnitID"].ToString(), sdr["UnitNo"].ToString(), td);// }//}#endregionfor (int i = 0; i {string td = string.Format(@"{0}", "编号");td += string.Format(@"{0}", "姓名");td += string.Format(@"{0}", i.ToString());td += string.Format(@"{0}", InputValue);ReturnStr += string.Format(@"{2}", i.ToString(), InputValue, td);}ReturnStr += @"";}}}2 引用页面无标题 1截个图给大家看看打包下载地址