ホームページ >ウェブフロントエンド >jsチュートリアル >JSクラスを自動完成させる(ピュアJS、Ajaxモード)_javascriptスキル
1. カプセル化された JS ファイル
//**************************************** ** *****************
//作成日: 2009-03-10
//作者: oloen
//内容説明: 自動完了JS クラス
//使用法:
// var auto = new autoComplete(クライアント ID)
// auto.Init(document.all.client ID); ************************************************* * **
//Autocomplete
function autoComplete(id)
{
var me = this;
//オートコンプリート バインディング コントロール クライアント ID
me.AutoCompleteControlID
me.ハンドル = null
me.DivResult;
me.LastIndex = -1;
me.CurrentTD = ''; if(id != null && typeof(id) != 未定義)
me.AutoCompleteControlID = id;
if(me.DivResult == null||typeof(me.DivResult)=="未定義 ")
{
me.DivResult = document.createElement("div");
varparent = document.getElementById(me.AutoCompleteControlID).parentElement;
if(typeof(parent)!= "未定義" ){
parent.appendChild(me.DivResult);
}
}
this.Init = function(obj)
{
me.handle = obj
私。 AutoCompleteControlID = obj.id
}
this.Auto = function()
{
me.DivResult.style.position = "absolute";
me.DivResult.style. .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 || イベント.keyCode == 40 || イベント.keyCode == 13)
{
me.SelectItem();
}
else
{
//ドロップダウン選択を -1 にします。
currentIndex = -1;
if(window.XMLHttpRequest)
{
me.requestObj = new XMLHttpRequest(); )
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()
{
//result
var result = document.getElementById("Tmp_AutoComplete_tblResult");
if (! result); 🎜>return;
if(result.rows[me.LastIndex] != null)
{
result.rows[me.LastIndex].style.backgroundColor = "#FFFFFF"; .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 me .currentIndex; 🎜>//Enter
if (event.keyCode == 13)
{
me.Select()
me.InitItem();
return; if(result.rows[me.currentIndex]!=unknown)
{
//選択した色
result.rows[me.currentIndex].style.backgroundColor = "#3161CE" ; .rows[me.currentIndex].style.color = "#FFFFFF";
me.DivResult.style.height = maxRow * 15; me.LastIndex = 私。
this.Select = function()
{
var result = document.getElementById("Tmp_AutoComplete_tblResult");
if (!result)
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.currentIndex = -1;
}
me.DivResult.onclick = function()
{
me.Auto();
document. ).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 バックエンド クエリ ページ
System.Data を使用;
System.Collections を使用;
System.Web を使用.Web.Security;
System.Web.UI を使用;
System.Web.UI.WebControls.WebParts を使用; .HtmlControls;
//System.Data.SqlClient を使用します
//*************************** *******************************
//作成日: 2009-03-10
//作成者: oloen
//コンテンツの説明: バックグラウンド クエリ ページを自動的に完了します
//****************************** ************ **********************
///
/// 自動的に完了バックグラウンド クエリ ページ
///
パブリック部分クラス Common_AutoComplete : System.Web.UI.Page
const string tbStyle = @""; 🎜>
/// フィルター条件
string Filter = string.Empty;
///
/ //
///
/// 現在、販売システムでは UnitNo クエリのみをサポートしています
///
string Type = string .Empty;
///
/// 結果の文字を返します
///
private void Page_Load(object sender, System.EventArgs e)
{
{
case "psunit":
AutoPSUnitNo();
break;
}
Response.ContentType = "text/xml"; .Encoding.GetEncoding("UTF-8");
Response.Write(ReturnStr);
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
Filter = Request.QueryString["Filter"] ??
InputValue = Request.QueryString["InputValue" ?? .Replace("'","''");
}
///
/// 営業システムの部屋番号が自動的に完成します
///
void AutoPSUnitNo()
{
if (! string.IsNullOrEmpty(InputValue))
{
ReturnStr = @"
{0} | ", sdr["ProjectNo"].ToString()) ;{0} | ", sdr["PhaseNo"].ToString()); >// //td = string.Format(@"{0} | ", sdr["BlockNo"].ToString()); td = string.Format(@"{0} | ", sdr["UnitNo"].ToString()); // ReturnStr = string.Format(@"
{0} | ", sdr["ProjectNo"].ToString());{0} | ", sdr["PhaseNo"].ToString());{0} | ", sdr["BlockNo"].ToString());{0} | ", sdr["UnitNo"].ToString());
{0} | ", "编号");{0} | ", "姓名");{0} | ", i.ToString());{0} | ", InputValue);