JS 自动完成 AutoComplete(Ajax 查询)_javascript技巧


一：JS 部分

复制代码 代码如下:

//********************************************************
//创建日期: 2009-03-10
//作 者: oloen
//內容说明:　自动完成JS类
//用法：
// var auto = new autoComplete(客户端ID);
// auto.Init(document.all.客户端ID);
// auto.Type = 'PSUnit' //PSSale
//********************************************************
//自动完成
function autoComplete(id)
{
var me = this;
//自动完成绑定控件客户端ID
me.AutoCompleteControlID
me.handle = null
me.DivResult ;
me.currentIndex = -1;
me.LastIndex = -1;
me.requestObj;
me.CurrentTD = '';
me.Filter = '1=1';
me.Type = 'PSUnit'
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 - 11;
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) + "&Filter=" + me.Filter + "&Type=" + me.Type, 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 || result.rows.length<=0)
return;
//默认第一条记录
if(me.currentIndex < 0)
me.currentIndex = 0;
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()
{
try{me.Auto();}catch(e){}
}
document.getElementById(me.AutoCompleteControlID).onclick = function(){
try{me.Auto();}catch(e){}
}
document.getElementById(me.AutoCompleteControlID).onkeyup = function(){
try{me.Auto();}catch(e){}
}
document.getElementById(me.AutoCompleteControlID).onkeydown = function(){
if (event.keyCode == 13)
{
try
{
me.Select()
me.InitItem();
}catch(e){}
}
}
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
//內容说明:　自动完成后台查询页面
// Type:pssale 合同查询
// Type:psunit 房间查询
//********************************************************
/// <summary>
/// 自动完成后台查询页面
/// </summary>
public partial class Common_AutoComplete : System.Web.UI.Page
{
const string tbStyle = @"style=""color:#F7922E""";
/// <summary>
/// 过滤条件
/// </summary>
string Filter = string.Empty;
/// <summary>
/// 查询值
/// </summary>
string InputValue = string.Empty;
/// <summary>
/// 自动完成类别
/// Type:pssale 合同查询
/// Type:psunit 房间查询
/// </summary>
string Type = string.Empty;
/// <summary>
/// 返回结果字符
/// </summary>
string ReturnStr = string.Empty;
private void Page_Load(object sender, System.EventArgs e)
{
switch (Type.ToLower())
{
case "pssale":
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"] ?? "1=1";
InputValue = Request.QueryString["InputValue"] ?? "";
InputValue.Replace("'","''");
Type = Request.QueryString["Type"] ?? "";
}
/// <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;"">";
string Sql = string.Format(@"SELECT TOP 10 UnitID,UnitNo,ProjectNo,PhaseNo,BlockNo FROM View_PS_Unit WHERE UnitNo LIKE '%{0}%' AND {1}", InputValue, Filter);
if (Type.ToLower().Equals("pssale"))
Sql = string.Format(@"SELECT TOP 10 SaleID,UnitID,UnitNo,ContractNo,Name,SaleDate,SellingPrice,ProjectNo FROM View_PS_Sale_Unit WHERE UnitNo LIKE '%{0}%' AND {1}", InputValue, Filter);
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"" {1}>{0}</td>", sdr["UnitNo"].ToString(), tbStyle);
if (Type.ToLower().Equals("pssale"))
{
ReturnStr += string.Format(@"<tr ReturnValue=""{0},{1},{2},{3},{4},{5},{6}"">{7}</tr>",
sdr["SaleID"].ToString(), sdr["UnitID"].ToString(),
sdr["UnitNo"].ToString(), sdr["ContractNo"].ToString(),
sdr["Name"].ToString(), sdr["SaleDate"].ToString(),
sdr["SellingPrice"].ToString(), td);
}
else
ReturnStr += string.Format(@"<tr ReturnValue=""{0},{1}"">{2}</tr>", sdr["UnitID"].ToString(), sdr["UnitNo"].ToString(), td);
}
}
ReturnStr += @"</table>";
}
}
}

3 调用部分

复制代码 代码如下:

<!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>

时间： 2024-10-31 14:09:56

JS 自动完成 AutoComplete(Ajax 查询)_javascript技巧的相关文章

js自动滑动+鼠标滑动区域_javascript技巧

自动滑动+鼠标滑动区域 10秒自动跳转 热点聚焦 图说新闻 经济新闻 新闻1 新闻2 新闻3 5秒自动跳转 财经要闻 财经观察 独家点评 湘股在线 财富排行榜 财经1 财经2 财经3 财经4 财经5 ! 这个虽然效果不错,但是如果一个页面有多个这样的效果,就要针对每一部分写多个JS函数,那就太蠢了.其实只有控件名称不同而已,求高手改进成一个通用函数或者类来调用,不胜感激. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 这个虽然效果不错,但是如果一个页面有多个这样的效果,就要针对每一

Fixie.js 自动填充内容的插件_javascript技巧

Fixie.js是一个自动填充HTML文档内容的开源工具 官方网址地址:http://fixiejs.com/ Fixie.js 下载地址 fixie_jb51.rar 为什么使用Fixie? 当我们设计网站的时候,由于无法确定最终填充的内容,经常需要添加一写lorem ipsum(关于Lorem ipsum)到页面里面来预览一下页面的展现效果. 问题来了,添加过多的无聊的内容,使得我们的HTML文档变得臃肿,并且陷入复制-粘贴,手工编辑的毅种循环中. Fixie.js就是针对这个问题而诞生的,

js 自动播放的实例代码_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;

javascript suggest效果 自动完成实现代码分享_javascript技巧

首先,用到的框架当然是我的框架mass Framework,当然你用其他框架也可以,如jQuery,没有什么复杂的东西.只要弄懂原理,一下子就能搞出来.想必,以后你们工作也遇到做搜索框的活儿. 由于本人没有后端,因此取用一个对象作为本地数据库.而我现在要做的,其实远远比suggest高级,类似IDE的语法提示的东西.当前成品已放到github上. 好了,我们动手吧.首先是结构层,装了FF的同学可以在百度首页查看源码,当输入几个字母时,会动态生成了那些HTML.不过怎么也好,其成就是一个DIV放到

easyui-combobox 实现简单的自动补全功能示例_javascript技巧

前台:  Html页面 <input id="clsydw" name="clsydw" class="easyui-combobox" data-options="" /> JS //自动补全功能 $("#clsydw").combobox({ valueField:'syr', textField:'syr', panelWidth:200, panelHeight:'auto', onCh

JavaScript jquery及AJAX小结_javascript技巧

 其实在学习之前,就已经用上了js,jquery和ajax,不过当时不清楚这些的区别,就全都当成js来看,然后别人一说jquery,ajax都觉得好像很高级,等到自己学习的时候,倒是对这些更清楚了一点,下面就来写一下我的总结. 简介 Javascript JavaScript,一种直译式脚本语言,是一种动态类型.基于原型的语言,内置支持类.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能.然而现在Ja

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

一. 封装的JS文件 //******************************************************** //创建日期: 2009-03-10 //作 者: oloen //內容说明: 自动完成JS类 //用法: // var auto = new autoComplete(客户端ID); // auto.Init(document.all.客户端ID); //***************************************************

js和css写一个可以自动隐藏的悬浮框_javascript技巧

今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天要说的就是通过控制其大小来实现元素的显隐,原理:为其注册鼠标移入.移出的事件,当鼠标移出对象范围,将其宽度设为1,当鼠标再次移入该对象,将其宽度还原.很简单,我们一起看看吧! 隐藏状态:   左边那一条窄线就是隐藏以后的悬浮框. 显示状态:   当鼠标滑到左边的悬浮框上,悬浮框就又显示出来了. CS

js实现iframe自动自适应高度的方法_javascript技巧

本文实例讲述了js实现iframe自动自适应高度的方法.分享给大家供大家参考.具体如下: 在编写网页的时候,很多时候要用到自动伸缩iframe高度 ,假如ifram中嵌入的是一个列表,那么增加数据后,刷新列表,iframe高度会自动伸长.删除数据后,iframe高度要自动缩短. 将下一段代码拷贝到iframe所在那个html或者jsp页面.在</html>标签后,调用此函数即可. <script type="text/javascript"> autoAdjus