自动完成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 相关文章推荐
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
JS常用表单验证方法总结
May 22 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 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中,文件上传
2006/12/06 PHP
PHP无限分类的类
2007/01/02 PHP
隐性调用php程序的方法
2009/03/09 PHP
php文档更新介绍
2011/07/22 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
JS如何生成动态列表
2020/09/22 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
详解在Python中处理异常的教程
2015/05/24 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
python实现自主查询实时天气
2018/06/22 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
python贪吃蛇游戏代码
2020/04/18 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python输入中文的实例方法
2020/09/14 Python
利用指针变量实现队列的入队操作
2012/04/07 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL