JS自動補完AutoComplete(Ajaxクエリ)_JavaScriptスキル

1: JS 部分

コードをコピー コードは次のとおりです:

//***************************************** ****************
//作成日: 2009-03-10
//作成者: oloen
//内容説明: オートコンプリート JS クラス
//使用法:
// var auto = new autoComplete(Client ID);
// auto.Init(document.all.Client ID);
// auto.Type = 'PSUnit ' //PSSale
//**************************************** * ****************
//Autocomplete
function autoComplete(id)
{
var me = this
//Autocomplete バインディングコントロールクライアント ID
me.AutoCompleteControlID
me.handle = null
me.currentIndex = -1;
me.LastIndex = -1; ;
me.CurrentTD = '';
me.Filter = '1=1';
me.Type = 'PSUnit'
if(id != null && typeof(id) ! =未定義)
me.AutoCompleteControlID = id;
if(me.DivResult == null||typeof(me.DivResult)=="未定義")
{
me.DivResult = document. ("div");
varparent = document.getElementById(me.AutoCompleteControlID).parentElement;
if(typeof(parent)!="unknown"){
parent.appendChild(me.DivResult ) ;
}
}
this.Init = function(obj)
{
me.handle = obj
me.AutoCompleteControlID = obj.id
}
this .Auto = function()
{
me.DivResult.style.position = "絶対";
me.DivResult.style.top = me.handle.getBoundingClientRect().top - 11; >me.DivResult.style.left = me.handle.getBoundingClientRect().left;
me.DivResult.style.width = me.handle.width = 20; 🎜>me.DivResult.style.backgroundColor = "#ffffff";
//上、下、または Enter を押すと
if (event.keyCode == 38 ||event.keyCode == 40 ||even .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=" エスケープ(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()
{
//result
var result = document.getElementById("Tmp_AutoComplete_tblResult"); 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;
//up
if (event.keyCode == 38 && me.currentIndex > 0)
me.currentIndex--;
//Down
if (event.keyCode == 40 && me.currentIndex < maxRow-1)
me.currentIndex;
//Enter
if (event.keyCode == 13)
{
me.Select()
me.InitItem() <🎜; >}
if(result.rows[me.currentIndex]!=unknown)
{
//選択した色
result.rows[me.currentIndex].style.backgroundColor = "# 3161CE" ;
result.rows[me.currentIndex].style.color = "#FFFFFF";
me.DivResult.style.height = maxRow * 15; 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 != unknown)
{
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. ;
}
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 バックエンド クエリ ページ

コードをコピー コードは次のとおりです:

System.Data を使用;
System.Web を使用;
System.Web.UI を使用;
System.Web.UI.WebControls を使用;
System.Web.UI.HtmlControls を使用; System.SqlClient を使用します。
//*********************************** ********** ***************
//作成日: 2009-03-10
//作成者: Oloen
/ /コンテンツの説明: バックグラウンド クエリ ページを自動的に完了します
// タイプ:pssale 契約の問い合わせ
// タイプ:psunit ルームの問い合わせ
//*************** *********** ****************************
/// <概要> 🎜>/// バックグラウンド クエリ ページを自動的に完了します
///
public Partial class Common_AutoComplete : System.Web.UI.Page
{
const string tbStyle = @"style =""color:#F7922E"" ";
///

/// フィルター条件
///

string Filter = string.Empty;
/// /// クエリ値
///
string InputValue = string.Empty;
🎜>/// オートコンプリート カテゴリ
/// タイプ: pssale 契約クエリ
/// タイプ: psunit room クエリ
///
string Type = string.Empty;
/// < summary>
/// 結果文字を返す
///
string ReturnStr = string.Empty; System.EventArgs e)
{
switch (Type.ToLower())
{
case "pssale":
case "psunit":
default:
AutoPSUnitNo( );
break;
}
Response.Clear();
Response.ContentEncoding = System.Text.Encoding.GetEncoding(" -8");
Response.Write(ReturnStr);
Response.End();
}
保護されたオーバーライド void OnInit(EventArgs e)
{
base.OnInit( e);
Filter = Request.QueryString["Filter"] ?? "1=1";
InputValue = Request.QueryString["InputValue"] ?? '","''") ;
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["BlockNo"].ToString ());
td = string.Format(@"", sdr[ "UnitNo"].ToString(), tbStyle);
if (Type.ToLower().Equals("pssale"))
{
ReturnStr = 文字列。 Format(@"{7} ",
sdr["SaleID "].ToString(), sdr["UnitID"].ToString(),
sdr["UnitNo"].ToString(), sdr["ContractNo"].ToString( ),
sdr["Name "].ToString(), sdr["SaleDate"].ToString(),
sdr["SellingPrice"].ToString(),
} else
ReturnStr = string.Format(@"{2}", sdr["UnitID"].ToString( ), sdr["UnitNo"].ToString(), td);
}
}
ReturnStr = @"
}
}
}



3 呼び出し部分





コードをコピー


コードは次のとおりです。

<頭>








<スクリプト>
var auto = new autoComplete('t1')
auto.Init(document.all.t1);

//中後の事情
function ReturnAutoComplete(ReturnValue)
{
alert(ReturnValue)
}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript は XML を読み取り、XML 実装コードを書き込みます_JavaScript スキル次の記事：JavaScript は XML を読み取り、XML 実装コードを書き込みます_JavaScript スキル

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

• ホームページ

• コース

• に質問

• 私の

• ホームページ
• コース
• 記事
• に質問
• 辞書
• マニュアル
• ダウンロード
• 特集

ホームページ

記事

に質問

コース

特集

ダウンロード

ゲーム

辞書

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

{0}	{0}", sdr["PhaseNo" ].ToString()); //td = string.Format(@"	{0}	{0}