www.hj8828.comJS 自动完成 AutoComplete_javascript技巧_脚本之家

一、 封装的JS文件
//********************************************************
//创建日期: 2009-03-10 //作 者: oloen //内容说明: 自动完成JS类 //用法:
// var auto = new autoComplete; // auto.Init;
//********************************************************
//自动完成 function autoComplete { 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 me.AutoCompleteControlID =
id; if(me.DivResult == null||typeof==”undefined”) { me.DivResult =
document.createElement; var parent =
document.getElementById(me.AutoCompleteControlID).parentElement;
if!=”undefined”){ parent.appendChild; } } this.Init = function {
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; } else if { try { me.requestObj = new
ActiveXObject; } catch { me.requestObj = new ActiveXObject; } }
if(me.requestObj == null) return; me.requestObj.onreadystatechange =
me.ShowResult; me.requestObj.open(“GET”,
“../Common/AutoComplete.aspx?InputValue=” + escape, 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 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 < maxRow-1) me.currentIndex++; //回车 if { me.Select;
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 return; var
ReturnValue = result.rows[me.currentIndex].ReturnValue; if(ReturnValue
!= undefined) { me.DivResult.style.display = ‘none’; //设置页面值
ReturnAutoComplete; } } 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; }
document.getElementById(me.AutoCompleteControlID).onclick = function; }
document.getElementById(me.AutoCompleteControlID).onkeyup = function; }
document.getElementById(me.AutoCompleteControlID).onkeydown =
function(){ if { me.Select; return; } }
document.getElementById(me.AutoCompleteControlID).onblur = function; } }
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 { case “psunit”:
default: AutoPSUnitNo(); break; } Response.Clear(); Response.ContentType
= “text/xml”; Response.ContentEncoding =
System.Text.Encoding.GetEncoding; Response.Write; Response.End(); }
protected override void OnInit { base.OnInit; Filter =
Request.QueryString[“Filter”] ?? “”; InputValue =
Request.QueryString[“InputValue”] ?? “”; InputValue.Replace; } /// ///
售楼系统房间编号自动完成 /// void AutoPSUnitNo() { if
(!string.IsNullOrEmpty { ReturnStr = @”

一:JS 部分复制代码
代码如下://********************************************************
//创建日期: 2009-03-10 //作 者: oloen //内容说明: 自动完成JS类 //用法:
// var auto = new autoComplete; // auto.Init; // auto.Type = ‘PSUnit’
//PSSale
//********************************************************
//自动完成 function autoComplete { var me = this;
//自动完成绑定控件客户端ID me.AutoCompleteControlID me.handle = null
me.DivResult ; me.currentIndex = -1; me.LastIndex = -1; me.requestObj;
me.CurrentTD = ”; me.Filter = ‘1=1’; me.Type = ‘PSUnit’ if(id != null
&& typeof me.AutoCompleteControlID = id; if(me.DivResult ==
null||typeof==”undefined”) { me.DivResult = document.createElement; var
parent =
document.getElementById(me.AutoCompleteControlID).parentElement;
if!=”undefined”){ parent.appendChild; } } this.Init = function {
me.handle = obj me.AutoCompleteControlID = obj.id } this.Auto =
function() { me.DivResult.style.position = “absolute”;
me.DivResult.style.top = me.handle.getBoundingClientRect().top – 11;
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; } else if { try { me.requestObj = new
ActiveXObject; } catch { me.requestObj = new ActiveXObject; } }
if(me.requestObj == null) return; me.requestObj.onreadystatechange =
me.ShowResult; me.requestObj.open(“GET”,
“../Common/AutoComplete.aspx?InputValue=” + escape + “&Filter=” +
me.Filter + “&Type=” + me.Type, 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 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 < maxRow-1) me.currentIndex++; //回车 if { me.Select;
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 ||
result.rows.length<=0) return; //默认第一条记录 if me.currentIndex =
0; var ReturnValue = result.rows[me.currentIndex].ReturnValue;
if(ReturnValue != undefined) { me.DivResult.style.display = ‘none’;
//设置页面值 ReturnAutoComplete; } } 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;}catch{} }
document.getElementById(me.AutoCompleteControlID).onclick =
function;}catch{} }
document.getElementById(me.AutoCompleteControlID).onkeyup =
function;}catch{} }
document.getElementById(me.AutoCompleteControlID).onkeydown =
function(){ if { try { me.Select; }catch{} } }
document.getElementById(me.AutoCompleteControlID).onblur = function; }
}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 //内容说明: 自动完成后台查询页面
// Type:pssale 合同查询 // Type:psunit 房间查询
//********************************************************
/// /// 自动完成后台查询页面 /// public partial class
Common_AutoComplete : System.Web.UI.Page { const string tbStyle =
@”style=””color:#F7922E”””; /// /// 过滤条件 /// string Filter =
string.Empty; /// /// 查询值 /// string InputValue = string.Empty; ///
/// 自动完成类别 /// Type:pssale 合同查询 /// Type:psunit 房间查询 ///
string Type = string.Empty; /// /// 返回结果字符 /// string ReturnStr =
string.Empty; private void Page_Load(object sender, System.EventArgs e)
{ switch { case “pssale”: case “psunit”: default: AutoPSUnitNo(); break;
} Response.Clear(); Response.ContentType = “text/xml”;
Response.ContentEncoding = System.Text.Encoding.GetEncoding;
Response.Write; Response.End(); } protected override void OnInit {
base.OnInit; Filter = Request.QueryString[“Filter”] ?? “1=1”;
InputValue = Request.QueryString[“InputValue”] ?? “”;
InputValue.Replace; Type = Request.QueryString[“Type”] ?? “”; } ///
/// 售楼系统房间编号自动完成 /// void AutoPSUnitNo() { if
(!string.IsNullOrEmpty { 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 as SqlDataReader) //{ // if (sdr == null
|| !sdr.HasRows) // { // ReturnStr = string.Empty; // return; // } //
while // { // string td = string.Format(@”

“; string Sql = string.Format(@”SELECT TOP 10
UnitID,UnitNo,ProjectNo,PhaseNo,BlockNo FROM View_PS_Unit WHERE UnitNo
LIKE ‘%{0}%’ AND {1}”, InputValue, Filter); if .Equals Sql =
string.Format(@”SELECT TOP 10
SaleID,UnitID,UnitNo,ContractNo,Name,SaleDate,SellingPrice,ProjectNo
FROM View_PS_Sale_Unit WHERE UnitNo LIKE ‘%{0}%’ AND {1}”,
InputValue, Filter); using (SqlDataReader sdr =
DataAccessHelper.ExecuteReader as SqlDataReader) { if (sdr == null ||
!sdr.HasRows) { ReturnStr = string.Empty; return; } while { string td =
string.Format(@”

{0}

{0}

“, sdr[“ProjectNo”].ToString; // //td += string.Format(@”

“, sdr[“ProjectNo”].ToString; //td += string.Format(@”

{0}

{0}

“, sdr[“PhaseNo”].ToString; // //td += string.Format(@”

“, sdr[“PhaseNo”].ToString; //td += string.Format(@”

{0}

{0}

“, sdr[“BlockNo”].ToString; // td += string.Format(@”

“, sdr[“BlockNo”].ToString; td += string.Format(@”

{0}

{0}

“, sdr[“UnitNo”].ToString; // ReturnStr += string.Format(@”

“, sdr[“UnitNo”].ToString; if .Equals { ReturnStr += string.Format(@”

{2}

{7}

“, sdr[“UnitID”].ToString(), sdr[“UnitNo”].ToString; // } //}
#endregion for (int i = 0; i < 10; i++) { string td =
string.Format(@”

“, sdr[“SaleID”].ToString(), sdr[“UnitID”].ToString(),
sdr[“UnitNo”].ToString(), sdr[“ContractNo”].ToString(),
sdr[“Name”].ToString(), sdr[“SaleDate”].ToString(),
sdr[“SellingPrice”].ToString; } else ReturnStr += string.Format(@”

{0}

{2}