ajax 自动完成下拉框自动提示位置问题

最新推荐文章于 2025-12-07 20:09:59 发布

转载最新推荐文章于 2025-12-07 20:09:59 发布 · 848 阅读

文章标签：

#ajax #function #table #border #null #input

本文介绍了一种使用JavaScript实现的动态下拉提示功能，该功能可根据用户输入的内容筛选并显示匹配项，支持键盘导航选择及跟随鼠标定位显示。通过自定义函数与事件监听实现了灵活的交互体验。

层的位置不对

var intIndex=0;arrList = new Array();

function dearray(aa)//定义array

{

//document.write(aa);

arrList = aa.split(',');

intIndex = arrList.length；

}

function test() {

init();

dearray("asp,csdn,aaaa,bbbbc,afd,werwe,adfs,ertr,qwq,qwqwq,trt,uyus,dsfs,uere,add,234,2,1dr4,ae4564,adf4645,afa3543,sdfse5,ae345345,sdf4564,34346536");

smanPromptList(arrList,"aspx");

dearray("1sdfsdf.com,a11sdafs.net,b22dsafsdf,c333asdfsadf,4444dsafasdf,dddsfddsafdsaf,121213dsafsdaf,43213asdfadsf,dsa3121dasf3,a213,323313,3213,32213,dsfsdddd,ds11dfsfd,ffdafd,afdfd,afd,baffad,2fda2fd,dasd");

smanPromptList(arrList,"aspx2");

smanPromptList(arrList,"inputer")

}

function init() {

if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}

arrList.sort( function(a, b) {

if(a.length>b.length)return 1;

else if(a.length==b.length)return a.localeCompare(b);

else return -1;

}

);

}

function smanPromptList(arrList,objInputId){

var objouter=document.getElementById("__smanDisp") //显示的DIV对象

var objInput = document.getElementById(objInputId); //文本框对象

var selectedIndex=-1;

var intTmp; //循环用的:)

if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}

//文本框失去焦点

objInput.onblur=function(){

objouter.style.display='none';

}

//文本框按键抬起

objInput.onkeyup=checkKeyCode;

//文本框得到焦点

objInput.onfocus=checkAndShow;

function checkKeyCode(){

var ie = (document.all)? true:false

if (ie){

var keyCode=event.keyCode

if (keyCode==40||keyCode==38){ //下上

var isUp=false

if(keyCode==40) isUp=true ;

chageSelection(isUp)

}else if (keyCode==13){//回车

outSelection(selectedIndex);

}else{

checkAndShow()

}

}else{

checkAndShow()

}

divPosition()

}

function checkAndShow(){

var strInput = objInput.value

if (strInput!=""){

divPosition();

selectedIndex=-1;

objouter.innerHTML ="";

for (intTmp=0;intTmp<arrList.length;intTmp++){

if (arrList[intTmp].substr(0, strInput.length)==strInput){

addOption(arrList[intTmp]);

}

objouter.style.display='';

}else{

objouter.style.display='none';

}

function addOption(value){

objouter.innerHTML +="<div onmouseover="this.className='sman_selectedStyle'" onmouseout="this.className=''" onmousedown="document.getElementById('"+objInputId+"').value='" + value + "'">" + value + "</div>"

}

function chageSelection(isUp){

if (objouter.style.display=='none'){

objouter.style.display='';

}else{

if (isUp)

selectedIndex++

else

selectedIndex--

}

var maxIndex = objouter.children.length-1;

if (selectedIndex<0){selectedIndex=0}

if (selectedIndex>maxIndex) {selectedIndex=maxIndex}

for (intTmp=0;intTmp<=maxIndex;intTmp++){

if (intTmp==selectedIndex){

objouter.children[intTmp].className="sman_selectedStyle";

}else{

objouter.children[intTmp].className="";

}

function outSelection(Index){

objInput.value = objouter.children[Index].innerText;

objouter.style.display='none';

}

function divPosition(){

var clx,cly;

clx=event.clientX;

cly = event.clientY;

objouter.style.top = cly+10;

objouter.style.left = clx+20;

objouter.style.width= getAbsoluteWidth(objInput)

}

document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");

document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");

function getAbsoluteHeight(ob){

return ob.offsetHeight

}

function getAbsoluteWidth(ob){

return ob.offsetWidth

}

function getAbsoluteLeft(ob){

var mendingLeft = ob .offsetLeft;