实用的ajax自动完成下拉提示框 -优快云博客

本文介绍了一种基于JavaScript的智能输入提示功能实现方法，通过数组排序和字符串匹配技术，为用户提供实时的输入建议，提高输入效率。该方案适用于多种输入场景，并支持键盘导航选择。

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

< script language = " 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 οnmοuseοver="this.className='sman_selectedStyle'" οnmοuseοut="this.className=''" οnmοusedοwn="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(){

objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);

objouter.style.left =getAbsoluteLeft(objInput);

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;