javascript
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 引用頁面
無標題 1var auto = new autoComplete('t1')
auto.Init(document.all.t1);
//選中后做的事情
function ReturnAutoComplete(ReturnValue)
{
alert(ReturnValue)
}
截個圖給大家看看
打包下載地址
相關文章
這篇文章主要介紹了javascript數組克隆簡單實現方法,實例分析了JavaScript中concat用于數組克隆的使用技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JS獲取本周周一，周末及獲取任意時間的周一周末功能,結合實例形式分析了js通過擴展實現針對日期的運算相關技巧,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了微信小程序公用參數與公用方法用法,結合實例形式分析了微信小程序中公用參數與公用方法的簡單定義與使用相關操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細介紹了js時間戳與日期格式之間相互轉換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了JavaScript獲取客戶端IP的方法(新方法)的相關資料,需要的朋友可以參考下2016-03-03
本人是Javascript菜鳥，下面是前幾天學習Javascript的旅程心得，希望對和我一樣的入門者有點用，也希望高手批評指正。2010-08-08
今天小編就為大家分享一篇關于layui的下拉搜索框異步加載數據的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
下面小編就為大家分享一篇JS實現在文本指定位置插入內容的簡單示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
本文給大家分享的是一組判斷IP地址是否合法，判斷子網掩碼是否合法，驗證輸入的網關地址是否合法的javascript代碼，十分的簡單實用，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要介紹了小程序獲取當前位置加搜索附近熱門小區及商區的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
最新評論
總結
以上是生活随笔為你收集整理的js纯ajax,自动完成JS类(纯JS, Ajax模式)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leetcode--56. 合并区间
- 下一篇： gradle idea java ssm