Heim  >  Artikel  >  Web-Frontend  >  JS 自动完成 AutoComplete(Ajax 查询)_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 18:50:201584Durchsuche

一: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 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.lengthreturn;
//默认第一条记录
if(me.currentIndex 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 房间查询
//********************************************************
///
/// 自动完成后台查询页面
///

public partial class Common_AutoComplete : System.Web.UI.Page
{
const string tbStyle = @"color:#F7922E""";
///
/// 过滤条件
///

string Filter = string.Empty;
///
/// 查询值
///

string InputValue = string.Empty;
///
/// 自动完成类别
/// Type:pssale 合同查询
/// Type:psunit 房间查询
///

string Type = string.Empty;
///
/// 返回结果字符
///

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"] ?? "";
}
///
/// 售楼系统房间编号自动完成
///

void AutoPSUnitNo()
{
if (!string.IsNullOrEmpty(InputValue))
{
ReturnStr = @"";
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(@"", sdr["ProjectNo"].ToString());
//td += string.Format(@"", sdr["PhaseNo"].ToString());
//td += string.Format(@"", sdr["BlockNo"].ToString());
td += string.Format(@"", sdr["UnitNo"].ToString(), tbStyle);
if (Type.ToLower().Equals("pssale"))
{
ReturnStr += string.Format(@"{7}",
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(@"{2}", sdr["UnitID"].ToString(), sdr["UnitNo"].ToString(), td);
}
}
ReturnStr += @"
{0}{0}{0}{0}
";
}
}
}

3 调用部分
复制代码 代码如下:







无标题 1





<script> <BR>var auto = new autoComplete('t1') <BR>auto.Init(document.all.t1); <br><br>//选中后做的事情 <BR>function ReturnAutoComplete(ReturnValue) <BR>{ <BR>alert(ReturnValue) <BR>} <BR></script>



Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn