自动完成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 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
一个简单的js树形菜单
2011/12/09 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Python网络爬虫实例讲解
2016/04/28 Python
python2.7到3.x迁移指南
2018/02/01 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
法律工作求职自荐信
2013/10/31 职场文书
毕业生自荐书
2013/12/18 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
职位说明书范文
2014/05/07 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
淮海战役观后感
2015/06/11 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
pytorch 如何使用batch训练lstm网络
2021/05/28 Python