简化输入请自动提示帮忙
技术与开发
在Google的搜索框中输入搜索信息的时候，我发现搜索框下方会自动弹出与输入信息内容相近的列表提示框，供用户选择。这种自动弹出提示框的效果很时髦，我想知道如何在自己的网站中应用这种效果？
小知识：热门搜索词自动提示的原理是把一些热门的词语存放在一个数组中，当输入内容时，程序自动进行对比将内容相近的词排列出来。这些热门词语可以手工赋值给数组，也可以利用ASP、PHP等语言与数据库结合，动态地生成搜索内容并赋值给数组。
设计热门搜索词自动提示不难，不过收集词库就须要花费一下心思了。我们首先要准备好词库，然后设计一个提示框，并把提示框与词库挂钩实现联动显示，最后用JavaScript代码实现提示框在搜索栏正下方自动弹出即可。
第一步：准备词组设计提示框
在设计之前，我们要准备好相关词库，并以数组形式保存。然后，我们要在网页中＜script＞处添加提示框代码，代码如下所示（完整代码下载地址：http://www.cpcw.com/bzsoft）：
document.write("＜div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;'onbulr＞ ＜/div＞");//大家可以根据自己的喜好修改层的样式
objInput.onblur=function(){objouter.style.display='none';
}
function dearray(aa)//定义array
{
arrList = aa.split(',');
}
dearray("1111,222,222a,aaa,aa1,bb,b222,b3,323313,3213,32213,dsfsdddd");//初始化提示框的内容
第二步：提示框中显示相近词组
当在搜索框内输入内容时，就自动弹出提示框，显示存储在数组中与输入内容相近的提示信息，要做到这样的联动，接着第一步的代码后面加入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.cpcw.com/bzsoft）：
var strInput = objInput.value//设strInput为搜索框中内容
if (strInput!="")//搜索框中内容不为空时响应以下内容，即弹出提示框
{
divPosition();
selectedIndex=-1;
objouter.innerHTML ="";
for(intTmp=0;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＞" 接下来，我们就要让提示框自动弹出，并且精确地显示在搜索框的正下方。要实现这个目的，我们可以用JavaScript代码来控制弹出，这样我们就可以实现热门搜索词自动提示的效果了。在＜script＞处输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.cpcw.com/bzsoft）： var pos = new Array(); var t=e.offsetTop; var l=e.offsetLeft; while(e=e.offsetParent) { t+=e.offsetTop; // 文本框距离上方或上层控件的位置、整型、单位像素 l+=e.offsetLeft; // 文本框离左方或上层控件的位置 } pos[0]=t; //赋给数组 pos[1]=l; return pos; // 返回座标值 } function divPosition(objInput) //objInput为对应文本框对象 { arrPos=getIE(objInput); objouter.style.top= arrPos[0]+20;//提示框显示在文本框的下方 objouter.style.left=arrPos[1]; objouter.style.width=getAbsoluteWidth(objInput)// 层的宽度与文本框宽度一致 本文介绍了如何实现热门搜索词自动提示功能，读者可以对代码进行美化，增加一些更炫的效果。此外，我们还可以延伸应用这种效果，例如鼠标滑过图片时弹出说明、制作很炫的弹出式下拉菜单等。第三步：自动弹出提示框
总结