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");
var parent = document.getElementById(me.AutoCompleteControlID).parentElement;
if(typeof(parent)!= "정의되지 않음" ){
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. .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";
//위, 아래를 누르거나 Enter
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()
{
//result
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
//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]!=undefine)
{
//선택한 색상
result.rows[me.currentIndex].style.BackgroundColor = "#3161CE"
결과 .rows[me.currentIndex].style.color = "#FFFFFF";
}
me.DivResult.style.height = maxRow * 15; me.LastIndex = me. }
this.Select = function()
{
var result = document.getElementById("Tmp_AutoComplete_tblResult")
if (!result)
returnValue = result; .rows[me.currentIndex].ReturnValue;
if(ReturnValue != undefine)
{
me.DivResult.style.display = 'none'
//페이지 값 설정
ReturnAutoComplete(ReturnValue);
}
}
this.Hide = function()
{
me.DivResult.style.display =
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 백엔드 쿼리 페이지
System.Data 사용,
System.Collections 사용,
System.Web 사용; .Web.Security;
System.Web.UI 사용;
System.Web.UI.WebControls.WebParts 사용; .HtmlControls;
//System.Data.SqlClient 사용
//****************************** ******************************
//작성일: 2009-03-10
//저자: oloen
//컨텐츠 설명: 백그라운드 쿼리 페이지 자동 완성
//******************************** ************ *********************
///

/// 자동완성 백그라운드 쿼리 페이지
///

public 부분 클래스 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":
기본값:
AutoPSUnitNo();
break;
}
Response.Clear();
Response.ContentType = "text/xml"; .Encoding.GetEncoding("UTF-8");
Response.Write(ReturnStr);
Response.End();
}
보호된 재정의 void OnInit(EventArgs e)

base.OnInit(e);
Filter = Request.QueryString["Filter"] ?? "";
InputValue = Request.QueryString["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); //사용(SqlDataReader sdr = DataAccessHelper.ExecuteReader(Sql) as SqlDataReader)
//{
// if (sdr == null | | !sdr.HasRows)
// {
/ / ReturnStr = string.Empty;
// return ";
#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(@"", sdr["ProjectNo"].ToString());
// //td = string.Format(@"", sdr["PhaseNo"].ToString());
// //td = string.Format(@"", sdr["BlockNo"].ToString());
// td = string.Format(@"", sdr["UnitNo"].ToString());
// ReturnStr = string.Format(@"{2}", sdr["UnitID"].ToString(), sdr["UnitNo"].ToString(), td);
// }
//}
#endregion
for (int i = 0; i {
string td = string.Format(@"", "编号");
td = string.Format(@"", "姓名");
td = string.Format(@"", i.ToString());
td = string.Format(@"", InputValue);
ReturnStr = string.Format(@"{2}", i.ToString(), InputValue, td);
}
ReturnStr = @"

{0}	{0}	{0}	{0}
{0}	{0}	{0}	{0}

// }
// 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 { string td = string.Format(@"{0}", "숫자" );
td = string.Format(@"{0}", "이름")
td = string.Format(@"{0}", i.ToString()); ReturnStr = string.Format(@"{2}", i.ToString(), InputValue, td);
} ReturnStr = @" ";
} }
} 인용문 2페이지





제목 없음1<script> <BR>var auto = new autoComplete('t1') <BR>auto.Init(document.all.t1); <BR>//选中后做的事情 <BR>function ReturnAutoComplete(ReturnValue) <BR>{ <BR>alert(ReturnValue) <BR>} <BR></script> 스크린샷 찍기 다들 보러가세요패키지 다운로드 주소