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

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

更新时间：2009年03月12日 23:51:15   作者：

自动完成JS类，用户体验较好。封装成类，方便使用。本站

一、 封装的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

//內容说明:　自动完成后台查询页面

//********************************************************

///

/// 自动完成后台查询页面

///

public partial class Common_AutoComplete : System.Web.UI.Page

{

const string tbStyle = @"";

///

/// 过滤条件

///

string Filter = string.Empty;

///

/// 查询值

///

string InputValue = string.Empty;

///

/// 自动完成类别

/// 目前只支持 售楼系统 UnitNo 查询

///

string Type = string.Empty;

///

/// 返回结果字符

///

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("'","''");

}

///

/// 售楼系统房间编号自动完成

///

void AutoPSUnitNo()

{

if (!string.IsNullOrEmpty(InputValue))

{

ReturnStr = @"

#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(@"

{0}", sdr["ProjectNo"].ToString());

// //td += string.Format(@"

{0}", sdr["PhaseNo"].ToString());

// //td += string.Format(@"

{0}", sdr["BlockNo"].ToString());

// td += string.Format(@"

{0}", sdr["UnitNo"].ToString());

// ReturnStr += string.Format(@"

{2}", sdr["UnitID"].ToString(), sdr["UnitNo"].ToString(), td);

// }

//}

#endregion

for (int i = 0; i < 10; i++)

{

string td = string.Format(@"

{0}", "编号");

td += string.Format(@"

{0}", "姓名");

td += string.Format(@"

{0}", i.ToString());

td += string.Format(@"

{0}", InputValue);

ReturnStr += string.Format(@"

{2}", i.ToString(), InputValue, td);

}

ReturnStr += @"

";

}

}

}

2 引用页面

无标题 1

var auto = new autoComplete('t1')

auto.Init(document.all.t1);

//选中后做的事情

function ReturnAutoComplete(ReturnValue)

{

alert(ReturnValue)

}

截个图给大家看看

20090312235112465.jpg

打包下载地址

相关文章

1a1b05c64693fbf380aa1344a7812747.png

这篇文章主要介绍了javascript数组克隆简单实现方法,实例分析了JavaScript中concat用于数组克隆的使用技巧,需要的朋友可以参考下2015-12-12

4f55910a645b073bc4fc65dc10dc14bd.png

这篇文章主要介绍了JS获取本周周一，周末及获取任意时间的周一周末功能,结合实例形式分析了js通过扩展实现针对日期的运算相关技巧,需要的朋友可以参考下2017-02-02

0ea3c7666119d5615e582f823fb3fad6.png

这篇文章主要介绍了微信小程序公用参数与公用方法用法,结合实例形式分析了微信小程序中公用参数与公用方法的简单定义与使用相关操作技巧,需要的朋友可以参考下2019-01-01

4f96a78db829b1556ff16de21e013c7a.png

这篇文章主要为大家详细介绍了js时间戳与日期格式之间相互转换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12

8cc1031babc6aff2319f1c6af8544aa0.png

这篇文章主要介绍了JavaScript获取客户端IP的方法(新方法)的相关资料,需要的朋友可以参考下2016-03-03

0c932a99bb7b6f23c937db507070cc7b.png

本人是Javascript菜鸟，下面是前几天学习Javascript的旅程心得，希望对和我一样的入门者有点用，也希望高手批评指正。2010-08-08

cca732bf65a93ed2ec0ac80c638460fe.png

今天小编就为大家分享一篇关于layui的下拉搜索框异步加载数据的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09

2d9f31f2af7b675a3d153d2b7f1035a7.png

下面小编就为大家分享一篇JS实现在文本指定位置插入内容的简单示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12

b452cee8ec5cd9e58ab98eba17281e59.png

本文给大家分享的是一组判断IP地址是否合法，判断子网掩码是否合法，验证输入的网关地址是否合法的javascript代码，十分的简单实用，有需要的小伙伴可以参考下。2015-05-05

f4838ec7e2d4da28e0b57d4e852dadd4.png

这篇文章主要介绍了小程序获取当前位置加搜索附近热门小区及商区的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04

最新评论

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/485435.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Leetcode--151. 翻转字符串里的单词

Leetcode--151. 翻转字符串里的单词

给定一个字符串&#xff0c;逐个翻转字符串中的每个单词。 示例 1&#xff1a; 输入: "the sky is blue" 输出: "blue is sky the" 示例 2&#xff1a; 输入: " hello world! " 输出: "world! hello" 解释: 输入字符串可以在前面或…
阅读更多...
python opencv3 检测人

python opencv3 检测人

git&#xff1a;https://github.com/linyi0604/Computer-Vision 1 # coding:utf-82 3 import cv24 5 6 # 检测i方框 包含o方框7 def is_inside(o, i):8 ox, oy, ow, oh o9 ix, iy, iw, ih i 10 return ox > ix and ox ow < ix iw and oy oh < iy i…
阅读更多...
朱松纯：AI从感知走向认知是必然趋势

朱松纯：AI从感知走向认知是必然趋势

来源&#xff1a;深度学习技术前沿1月28日&#xff0c;以"小数据、大任务"作为技术范式的强认知人工智能平台企业暗物智能科技&#xff08;以下简称“暗物智能”&#xff09;宣布&#xff0c;已于2020年年中完成5亿元人民币的A轮融资。本轮融资由赛领资本和吉富创投共…
阅读更多...
五十个小技巧提高PHP执行效率

五十个小技巧提高PHP执行效率

在项目开发过程中&#xff0c;经常遇到了一些PHP处理程序性能底下的情况&#xff0c;程序运行在centosnginx环境&#xff0c;虽然这个有很多的原因如&#xff1a;服务器本身配置&#xff0c;运行环境nginx服务&#xff0c;php-fpm配置等等&#xff0c;更多有一点仍然是PHPer没有…
阅读更多...
statement的增删改查和动态的增删改查

statement的增删改查和动态的增删改查

一 statement的crud&#xff1a; mybatis约定&#xff1a; 输入参数parameterType和输出参数resultType&#xff0c;在形式上都只能有一个 如果输入参数&#xff1a;是简单类型(8个基本类型String)&#xff0c;则可以使用任何占位符&#xff0c;#{xxx} 如果是对象类型&…
阅读更多...
科学家「黑进」果蝇大脑跑NLP任务，发现效率比BERT高

科学家「黑进」果蝇大脑跑NLP任务，发现效率比BERT高

来源&#xff1a;机器之心最近一段时间&#xff0c;有关摩尔定律终结的讨论时常出现&#xff0c;深度学习越来越高的算力需求与芯片制造厂商们「挤牙膏」式的换代速度产生了不可调和的矛盾。对此&#xff0c;一些研究者们正在专注于常规架构的效率提升&#xff0c;也有一些研究…
阅读更多...
配置信息的优化，类型转换器

配置信息的优化，类型转换器

1. 优化&#xff1a; 可以将配置信息单独放入db.properties中&#xff0c;然后再动态引入 db.properties:kv <configuration> <properties resource"db.properties"/> 引入之后&#xff0c;使用${key} 2. MyBatis全局参数 在<configuration&g…
阅读更多...
Attention Model

Attention Model

参考1: https://blog.csdn.net/malefactor/article/details/50550211 attention部分实现: https://blog.csdn.net/mpk_no1/article/details/72862348转载于:https://www.cnblogs.com/ying-chease/p/9448726.html
阅读更多...
卫星互联网行业深度报告：战火早已熊熊燃烧

卫星互联网行业深度报告：战火早已熊熊燃烧

来源&#xff1a;万联证券1、低轨卫星加速建设&#xff0c;协同 5G 与地面通信互补融合1.1 卫星互联网纳入新基建&#xff0c;未来蓝海无限。卫星互联网是基于卫星通信的互联网&#xff0c;通过一定数量的卫星形成规模组网&#xff0c;从而辐射 全球&#xff0c;构建具备实时信…
阅读更多...
Leetcode--416. 分割等和子集

Leetcode--416. 分割等和子集

给定一个只包含正整数的非空数组。是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 注意: 每个数组中的元素不会超过 100 数组的大小不会超过 200 示例 1: 输入: [1, 5, 11, 5] 输出: true 解释: 数组可以分割成 [1, 5, 5] 和 [11]. 示例 2: …
阅读更多...
LUGOU P3907 圈的异或

LUGOU P3907 圈的异或

传送门 解题思路 其实就是找出所有的环判断&#xff0c;因为数据范围很小直接暴力做&#xff0c;注意要判断自环。 代码 #include<iostream> #include<cstdio> #include<cstring> #include<cmath> #include<algorithm>using namespace std; cons…
阅读更多...
新基建下的自动驾驶：单车智能和车路协同之争

新基建下的自动驾驶：单车智能和车路协同之争

来源&#xff1a;德勤Deloitte编辑&#xff1a;蒲蒲2020年3月&#xff0c;随着中央政治会议的正式定调&#xff0c;“新基建”&#xff0c;即新型基础设施建设&#xff0c;成为公众新焦点。4月&#xff0c;发改委明确新基建范围。在新基建涉及的细分领域中&#xff0c;5G、物联…
阅读更多...
输入参数

输入参数

输入参数&#xff1a;parameterType #{} ${}区别&#xff1a; 1. 类型为简单类型&#xff08;8个基本类型String&#xff09; #{任意值} ${value},其中的标识符只能是value #{}自动给String类型加上 ${}原样输出 但是适合动态排序&#xff08;动态字段&#xff09; s…
阅读更多...
2038: [2009国家集训队]小Z的袜子(hose)

2038: [2009国家集训队]小Z的袜子(hose)

2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 15879 Solved: 7205[Submit][Status][Discuss]Description 作为一个生活散漫的人&#xff0c;小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿。终于有一天&#xff0c;小…
阅读更多...
Jeff Dean三执笔：一文看尽2020年谷歌AI重大突破

Jeff Dean三执笔：一文看尽2020年谷歌AI重大突破

来源&#xff1a;AI前线作者&#xff1a;Jeff Dean译者&#xff1a;核子可乐策划&#xff1a;钰莹 在二十年前刚刚加入谷歌时&#xff0c;我们关注的问题只有一个——如何面向这么多不同种类的联网计算机提供一整套质量出色且涵盖范围全面的网络信息搜索服务。到如今&#xff0…
阅读更多...
输出参数

输出参数

输出参数为resultType 1.简单类型&#xff08;8个基本类型String&#xff09; 2.输出参数为实体对象类型 3. 输出参数为实体对象类型的集合&#xff1a;虽然输出类型是集合&#xff0c;但是resultType依然写集合的元素类型 4. 输出参数类型为HashMap HashMap本身是一个集合…
阅读更多...
模板 普通平衡树

模板 普通平衡树

Treap 版&#xff1a; 查询操作是最简单的&#xff0c;就是二叉搜索树。左旋右旋画一画就好了。 最近代码能力下降&#xff0c;码一码模板QAQ 1 #include<ctime>2 #include<cstdio>3 #include<cstring>4 #include<cstdlib>5 #include<algorithm>…
阅读更多...
信号时频图的横纵坐标对调

信号时频图的横纵坐标对调

博客1&#xff1a;如何翻转信号的时频图论文有时候需要绘制信号的时频图。Matlab有专用的函数spectrogram可以用来帮助我们绘制信号的时频图。默认的图例是横轴为频率&#xff0c;纵轴为时间。如果希望将横轴和纵轴对调&#xff0c;只需要在函数的末尾指定xaxis或yaxis即可。sp…
阅读更多...
技术的顶点，是普惠人类还是超越人类

技术的顶点，是普惠人类还是超越人类

来源&#xff1a;大数据文摘我们很容易忽视我们在宏大的生态系统中的卓越地位&#xff0c;尤其是在一个容易依赖技术引领我们走向我们渴望的未来的时代。我们真的相信技术比人类更复杂和必要吗&#xff1f;被创造的东西真的能取代它的创造者吗&#xff1f;我们必须共同决定&…
阅读更多...
HDU 2089 不要62

HDU 2089 不要62

杭州人称那些傻乎乎粘嗒嗒的人为62&#xff08;音&#xff1a;laoer&#xff09;。 杭州交通管理局经常会扩充一些的士车牌照&#xff0c;新近出来一个好消息&#xff0c;以后上牌照&#xff0c;不再含有不吉利的数字了&#xff0c;这样一来&#xff0c;就可以消除个别的士司机…
阅读更多...
最新文章

Copyright @ 2022~2023