Ajax自动匹配（类似Google Suggest的功能）-CSDN博客

本文介绍了一种使用Js实现的动态下拉提示框功能，该功能可根据用户输入实时更新并展示匹配项列表。通过监听输入框事件，利用定时器进行防抖处理，减少不必要的查询次数，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Js的文件

// JScript 文件

var queryField;

var divName;

var listName;

var lastVal = "";

var val = "";　

var selectListName;

var clearFlag=0;

var hiddenFlag=0;

var moveToX;

var moveToY;

var pos;

var NotDo=1;

var rng;

//循环调用函数

function mainLoop()

{

val=escape(queryField.value);

if(queryField.value.charAt(queryField.value.length-1)==' ')

{

queryField.value=queryField.value.trim(); //自动清楚最后一个空格。

}

if(val.length<1 || hiddenFlag)//查询框为空时不查询

HiddenDiv();

else if(lastVal!=val && !hiddenFlag)//上次的值和本次的值不同并且没有隐藏标志

{

queryField.value=queryField.value.replace(/，/g,",");

// var htmlstr=queryField.innerHTML;

// htmlstr=htmlstr.replace(/(^*\n*)|(^*\r*)/g,"");//替换回车

// queryField.innerHTML=htmlstr;

//alert(htmlstr);

//queryField.value=queryField.value.replace(/(^*\n*)|(^*\r*)/g,"");

var response=Bussiness.ArchivesBLL.GetArrayUserName(queryField.value.trim());

showQueryDiv(response.value);

}

lastVal=val;

window.setTimeout('mainLoop()',100);

return true;

}

//初始化梆定textbox的事件

function InitQueryCode( QueryField2,ListName2,DivName2)

{

lastVal="";

val="";

divName=null;

queryField = QueryField2;//document.getElementById(QueryField2);

pos=GetObjPos(queryField);

listName=document.getElementById(ListName2);

divName=document.getElementById(DivName2);

queryField.autocomplete = "off";

queryField.onblur=HiddenDiv;

queryField.onkeydown = keypressHandler;

//listName.onchange=SelectChange;

listName.onclick=SelectChange;

selectListName=ListName2;

// moveToX=event.clientY+15;//pos.x+queryField.style.height;//

//MoveToY=event.clientX-15;

if(queryField.name=="TextBoxAttendMan")

moveToX=pos.y+50;//event.clientY+20;

else

moveToX=pos.y+20;

moveToY=pos.x;

// alert("x:"+pos.x+" y:"+pos.y);

RedirectDiv();

divName.style.visibility="hidden";

//document.all(QueryField2).focus();

//queryField.focus();

//移动光标到文字的末尾

// rng = event.srcElement.createTextRange();

// rng.moveToPoint(event.x,event.y);

setTimeout("mainLoop()",100);

}

function RedirectDiv()

{

divName.style.top=moveToX;

// divName.style.left=divName.style.left-5;

divName.style.left=moveToY;

}

//将记录插入到list中，并显示

function showQueryDiv(ResultArray)

{

if(ResultArray.length>0)

{

var index=listName.selectedIndex;

for(var i=listName.length;i>=0;i--)

listName.remove(i);

var i=0;

divName.style.visibility="visible";

for(i=0;i<ResultArray.length;i++)

{

listName[i]=new Option(ResultArray[i],ResultArray[i]);

}

if(listName.lenth-1>=index)

listName[index].selected=true;

else

listName[0].selected=true;

// divName.style.height="95px";

}

else

HiddenDiv();

}

function CPos(x, y)

{

this.x = x;

this.y = y;

}

//获取控件的位置

function GetObjPos(ATarget)

{

var target = ATarget;

var pos = new CPos(target.offsetLeft, target.offsetTop);

var target = target.offsetParent;

while (target)

{

pos.x += target.offsetLeft;

pos.y += target.offsetTop;

target = target.offsetParent

}

return pos;

}

function SelectChange()

{//选择了记录

// var spiltstr="";

var str=listName.value;

// if(str.indexOf("|")>0)

// {

// spiltstr=str.substring(0,str.indexOf("|"));

// }

// queryField.value = spiltstr;

var temp=queryField.value;

temp=temp.replace(/，/g,",");

if(temp.lastIndexOf(",")>=0)

{

temp=temp.substring(0,temp.lastIndexOf(",")+1);

queryField.value=temp+str+",";

}

else

queryField.value=str+",";

//queryField.value=queryField.value+str;

queryField.focus();

HiddenDiv();

hiddenFlag=1;//隐藏标志

}

//隐藏div

function HiddenDiv()

{

divName.style.visibility="hidden";

}

//按|分离

function ReplaceStr(str)

{

if(str.indexOf("|")>0)

{

str=str.substring(0,str.indexOf("|"));

}

return str;

}

//判断是否是数字

function IsNumeric(sText)

{

var ValidChars = "0123456789";

var IsNumber=true;

var Char;

for (i = 0; i < sText.length && IsNumber == true; i++)

{

Char = sText.charAt(i);

if (ValidChars.indexOf(Char) == -1)

{

IsNumber = false;

}

return IsNumber;

}

//输入框onkeydown的响应函数．

function keypressHandler()

{

hiddenFlag=0;//不隐藏

//lastVal="";//清除上次的记录

var key=event.keyCode;

var KEYUP=38;

var KEYDOWN=40;

var KEYENTER=13;

var KEYTAB=9;

var KEYBLANK=32;

//alert(key);

if(key==KEYDOWN && divName.style.visibility!="hidden" && listName.length>0)

{

var index=listName.selectedIndex;

// alert(index+" "+listName.length);

if(index>=listName.length-1)

listName.selectedIndex=0;

else

listName.selectedIndex=index+1;

}

else

if(key==KEYUP && divName.style.visibility!="hidden" && listName.length>0)

{

var index=listName.selectedIndex;

if(index==0)

listName.selectedIndex=listName.length-1;

else

listName.selectedIndex=index-1;

}

else

if((key==KEYENTER || key==KEYBLANK || key==KEYTAB) && divName.style.visibility!="hidden" && listName.length>0)

{

SelectChange();

event.keyCode=-1;

// queryField.focus();

}

else

{

// mainLoop();

//event.keyCode=null;

}

调用方式

<asp:TextBox ID="TextOrganiger" runat="server" onfocus="InitQueryCode(this,'ManList','ManDiv')" ></asp:TextBox> 

<div id="ManDiv" style=" visibility:hidden; z-index: 101; left: 162px; width: 122px; position: absolute; top: 216px;

height: 115px">

</select>

</div>