JS 自动完成 AutoComplete(Ajax 查询)


Posted in Javascript onJuly 07, 2009

JS 自动完成 AutoComplete(Ajax 查询)
一:JS 部分

//******************************************************** 
//创建日期: 2009-03-10 
//作 者: oloen 
//?热菟得? 自动完成JS类 
//用法: 
// var auto = new autoComplete(客户端ID); 
// auto.Init(document.all.客户端ID); 
// auto.Type = 'PSUnit' //PSSale 
//******************************************************** 
//自动完成 
function autoComplete(id) 
{ 
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(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 - 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("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) + "&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 (!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 < maxRow-1) 
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 || result.rows.length<=0) 
return; 
//默认第一条记录 
if(me.currentIndex < 0) 
me.currentIndex = 0; 
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() 
{ 
try{me.Auto();}catch(e){} 
} 
document.getElementById(me.AutoCompleteControlID).onclick = function(){ 
try{me.Auto();}catch(e){} 
} 
document.getElementById(me.AutoCompleteControlID).onkeyup = function(){ 
try{me.Auto();}catch(e){} 
} 
document.getElementById(me.AutoCompleteControlID).onkeydown = function(){ 
if (event.keyCode == 13) 
{ 
try 
{ 
me.Select() 
me.InitItem(); 
}catch(e){} 
} 
} 
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 
//?热菟得? 自动完成后台查询页面 
// Type:pssale 合同查询 
// Type:psunit 房间查询 
//******************************************************** 
/// <summary> 
/// 自动完成后台查询页面 
/// </summary> 
public partial class Common_AutoComplete : System.Web.UI.Page 
{ 
const string tbStyle = @"style=""color:#F7922E"""; 
/// <summary> 
/// 过滤条件 
/// </summary> 
string Filter = string.Empty; 
/// <summary> 
/// 查询值 
/// </summary> 
string InputValue = string.Empty; 
/// <summary> 
/// 自动完成类别 
/// Type:pssale 合同查询 
/// Type:psunit 房间查询 
/// </summary> 
string Type = string.Empty; 
/// <summary> 
/// 返回结果字符 
/// </summary> 
string ReturnStr = string.Empty; 
private void Page_Load(object sender, System.EventArgs e) 
{ 
switch (Type.ToLower()) 
{ 
case "pssale": 
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"] ?? "1=1"; 
InputValue = Request.QueryString["InputValue"] ?? ""; 
InputValue.Replace("'","''"); 
Type = Request.QueryString["Type"] ?? ""; 
} 
/// <summary> 
/// 售楼系统房间编号自动完成 
/// </summary> 
void AutoPSUnitNo() 
{ 
if (!string.IsNullOrEmpty(InputValue)) 
{ 
ReturnStr = @"<table cellSpacing=""0"" cellPadding=""0"" width=""150px"" align=""center"" border=""0"" id=""Tmp_AutoComplete_tblResult"" style=""padding-left:5;padding-right:5; background-color:#FFFFFF;border:1px solid #999999;"">"; 
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 (Type.ToLower().Equals("pssale")) 
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(Sql) as SqlDataReader) 
{ 
if (sdr == null || !sdr.HasRows) 
{ 
ReturnStr = string.Empty; 
return; 
} 
while (sdr.Read()) 
{ 
string td = string.Format(@"<td height=""15"" nowrap>{0}</td>", sdr["ProjectNo"].ToString()); 
//td += string.Format(@"<td height=""15"" nowrap>{0}</td>", sdr["PhaseNo"].ToString()); 
//td += string.Format(@"<td height=""15"" nowrap>{0}</td>", sdr["BlockNo"].ToString()); 
td += string.Format(@"<td height=""15"" nowrap align=""right"" {1}>{0}</td>", sdr["UnitNo"].ToString(), tbStyle); 
if (Type.ToLower().Equals("pssale")) 
{ 
ReturnStr += string.Format(@"<tr ReturnValue=""{0},{1},{2},{3},{4},{5},{6}"">{7}</tr>", 
sdr["SaleID"].ToString(), sdr["UnitID"].ToString(), 
sdr["UnitNo"].ToString(), sdr["ContractNo"].ToString(), 
sdr["Name"].ToString(), sdr["SaleDate"].ToString(), 
sdr["SellingPrice"].ToString(), td); 
} 
else 
ReturnStr += string.Format(@"<tr ReturnValue=""{0},{1}"">{2}</tr>", sdr["UnitID"].ToString(), sdr["UnitNo"].ToString(), td); 
} 
} 
ReturnStr += @"</table>"; 
} 
} 
}

3 调用部分
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb-2312" /> 
<script type="text/javascript" src="../JS/AutoComplete.js"></script> 
<title>无标题 1</title> 
</head> 
<body> 
<input id="t1" type="text"> 
<script> 
var auto = new autoComplete('t1') 
auto.Init(document.all.t1); 
//选中后做的事情 
function ReturnAutoComplete(ReturnValue) 
{ 
alert(ReturnValue) 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
超级退弹代码
Jul 07 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
javascript 选择文件夹对话框(web)
Jul 07 #Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 #Javascript
javascript 新浪背投广告实现代码
Jul 07 #Javascript
JavaScript 对象、函数和继承
Jul 07 #Javascript
js 日期转换成中文格式的函数
Jul 07 #Javascript
javascript 面向对象思想 附源码
Jul 07 #Javascript
jquery BS,dialog控件自适应大小
Jul 06 #Javascript
You might like
星际争霸任务指南——人族
2020/03/04 星际争霸
推荐文章系统(一)
2006/10/09 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
Python实现删除文件但保留指定文件
2015/06/21 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Django框架视图函数设计示例
2019/07/29 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
python绘制汉诺塔
2021/03/01 Python
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
Java编程面试题
2016/04/04 面试题
会计岗位职责
2013/11/08 职场文书
上班看电影检讨书
2014/02/12 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
日语专业求职信
2014/07/04 职场文书
三人合伙协议书范本
2014/10/29 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python