自动完成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 相关文章推荐
JS array 数组详解
Mar 22 Javascript
javascript parseInt 大改造
Sep 27 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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读取3389的脚本
2014/05/06 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
php fread函数使用方法总结
2019/05/28 PHP
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python and、or以及and-or语法总结
2015/04/14 Python
Python中is与==判断的区别
2017/03/28 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
python如何实现视频转代码视频
2019/06/17 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Python如何转换字符串大小写
2020/06/04 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
个人公开承诺书
2014/03/28 职场文书
农业项目投资意向书
2015/05/09 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
步步惊心观后感
2015/06/12 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL