自动完成JS类(纯JS, Ajax模式)


Posted in Javascript onMarch 12, 2009

一、 封装的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 < 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)
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
//?热菟得? 自动完成后台查询页面
//********************************************************
/// <summary>
/// 自动完成后台查询页面
/// </summary>
public partial class Common_AutoComplete : System.Web.UI.Page
{
const string tbStyle = @"";
/// <summary>
/// 过滤条件
/// </summary>
string Filter = string.Empty;
/// <summary>
/// 查询值
/// </summary>
string InputValue = string.Empty;
/// <summary>
/// 自动完成类别
/// 目前只支持 售楼系统 UnitNo 查询
/// </summary>
string Type = string.Empty;
/// <summary>
/// 返回结果字符
/// </summary>
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("'","''");
}
/// <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;"">";
#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(@"<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"">{0}</td>", sdr["UnitNo"].ToString());
// ReturnStr += string.Format(@"<tr ReturnValue=""{0},{1}"" UnitID=""{0}"" UnitNo=""{1}"">{2}</tr>", sdr["UnitID"].ToString(), sdr["UnitNo"].ToString(), td);
// }
//}
#endregion
for (int i = 0; i < 10; i++)
{
string td = string.Format(@"<td height=""15"" nowrap>{0}</td>", "编号");
td += string.Format(@"<td height=""15"" nowrap>{0}</td>", "姓名");
td += string.Format(@"<td height=""15"" nowrap>{0}</td>", i.ToString());
td += string.Format(@"<td height=""15"" nowrap align=""right"">{0}</td>", InputValue);
ReturnStr += string.Format(@"<tr ReturnValue=""{0},{1}"" UnitID=""{0}"" UnitNo=""{1}"">{2}</tr>", i.ToString(), InputValue, td);
}
ReturnStr += @"</table>";
}
}
}
2 引用页面
<!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>
截个图给大家看看
自动完成JS类(纯JS, Ajax模式)
打包下载地址

Javascript 相关文章推荐
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
jquery分割字符串的方法
Jun 24 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
动态添加js事件实现代码
Mar 12 #Javascript
javascript prototype 原型链
Mar 12 #Javascript
10个新的最有前途的JavaScript框架
Mar 12 #Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 #Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 #Javascript
Iframe thickbox2.0使用的方法
Mar 05 #Javascript
js 颜色选择器(兼容firefox)
Mar 05 #Javascript
You might like
php写的简易聊天室代码
2011/06/04 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Python图片的横坐标汉字实例
2019/12/04 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
python进度条显示之tqmd模块
2020/08/22 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
写好求职信第一句话的技巧
2013/10/26 职场文书
黄河象教学反思
2014/02/10 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
公司营业员的自我评价
2014/03/04 职场文书
交通事故委托书范本
2014/09/28 职场文书
财务管理制度范本
2015/08/04 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技