JS 자동 완성 AutoComplete(Ajax 쿼리)_javascript 기술

1: JS 부분

코드 복사 코드는 다음과 같습니다.

//****************************************** ****************
//작성일: 2009-03-10
//작성자: oloen
//콘텐츠 설명: JS 클래스 자동완성
//사용법:
// var auto = new autoComplete(클라이언트 ID);
// auto.Init(document.all.Client ID)// auto.Type = 'PSUnit ' //PSSale
//***************************************** * ****************
//자동완성
function autoComplete(id)
{
var me = this
//자동완성 바인딩; 제어 클라이언트 ID
me.AutoCompleteControlID
me.handle = null
me.DivResult;
me.currentIndex = -1;
me.LastIndex =
me. ;
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");
var parent = document.getElementById(me.AutoCompleteControlID).parentElement;
if(typeof(parent)!="undefine"){
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;
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)
{
시도
{
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()
{
//result
var result = document.getElementById("Tmp_AutoComplete_tblResult")
if (! 결과)
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()
return; >}
if(result.rows[me.currentIndex]!=undefine)
{
//선택한 색상
result.rows[me.currentIndex].style.BackgroundColor = "# 3161CE" ;
result.rows[me.currentIndex].style.color = "#FFFFFF";
}
me.DivResult.style.height = maxRow *
me.LastIndex = me. 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 != undefine)
{
me.DivResult.style.display = 'none';
//페이지 값 설정
ReturnAutoComplete( ReturnValue); 🎜>}
}
this.Hide = function()
{
me.DivResult.style.display = 'none';
me.currentIndex =
}
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)
{
시도
{
me.Select()
me.InitItem()
}catch(e){}
}
}
document.getElementById(me.AutoCompleteControlID).onblur = function(){
me.Hide()
}
}


2 백엔드 쿼리 페이지

코드 복사 코드는 다음과 같습니다.

System.Data 사용;
System.Collections 사용;
System.Web.Security 사용; 🎜>System.Web.UI 사용;
System.Web.UI.WebControls 사용;
System.Web.UI.HtmlControls 사용; Data.SqlClient 사용
//************************************** ********** ***************
//작성일: 2009-03-10
//작성자: 올로엔
/ /컨텐츠 설명: 백그라운드 쿼리 페이지 자동 완성
// 유형:pssale 계약 조회
// 유형:psunit 룸 조회
//***************** *********** ****************************
/// <요약>
/// 백그라운드 쿼리 자동 완성 페이지
///
public 부분 클래스 Common_AutoComplete : System.Web.UI.Page
{
const string tbStyle = @"style =""color:#F7922E"" ";
///

/// 필터 조건
///

string Filter = string.Empty;
/// /// 쿼리 값
///
string InputValue = string.Empty;//

🎜>/// 자동완성 카테고리
/// 유형: pssale 계약 쿼리
/// 유형: psunit room 쿼리
///

string 유형 = string.Empty;
/// < 요약>
/// 결과 문자 반환
///
string ReturnStr = string.Empty
private void Page_Load; System.EventArgs e)
{
스위치(Type.ToLower())
{
case "pssale":
case "psunit":
기본값:
AutoPSUnitNo( );
break;
}
Response.ContentType = "text/xml"
Response.ContentEncoding("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"] ?? ""; '","''") ;
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); 🎜>(SqlDataReader sdr = DataAccessHelper.ExecuteReader(Sql)를 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 = 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}", sdr["PhaseNo" ].ToString()); //td = string.Format(@"	{0}	{0}

"
}
}



3 호출부





코드 복사


코드는 다음과 같습니다.

<머리>





<본문>


<스크립트>
var auto = new autoComplete('t1')
auto.Init(document.all.t1);

//选中后做的事情
function ReturnAutoComplete(ReturnValue)
{
alert(ReturnValue)
}

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.