现在的位置: 首页 > 综合 > 正文

google热门词(近似词)自动提示的实现及源代码

2013年03月31日 ⁄ 综合 ⁄ 共 6852字 ⁄ 字号 小 中 大 ⁄ 评论关闭

 google热门词(近似词)自动提示源代码

 

在google的搜索框中输入搜索信息的时候，搜索框下方会自动弹出与输入信息内容相近似的列表提示框，供用户选择。
 
自动提示框的原理是把一些热门（近似）词语放在一个数组中，当输入内容时，程序自动进行对比将内容相近的词排列出来。这些热门词语可以手工赋值给数组，也可以利用ASP,PHP等语言与数据库结合，动态生成搜索内容并赋值给数组。
 
一、操作步骤：
1、准备词组设计提示框：
 
  1. document.write("<div id='__smanDisp' style='position:absolute; display:none; background:#E8F7EB; border: 1px solid #CCCCCC; font-size:14px; cursor: default;' onbulr> </div>");  //根据自己喜欢修改样式 
  3. objInput.onblur=fuction()
  4. { 
  5.     objouter.style.display='none';
  6. }
  8. function dearray(aa)//定义array 
  9. {
  10.     arrList = aa.split(',');    
  11. }
  13. dearray("1111,222,222a,aaa,aa1,bb,b222,b3,323313,3213,32213,dsfsdddd");//初始化提示框的内容

2、提示框中显示相近词组：

 
 
  1. var strInput = objInput.value;//设置为搜索的内容
  2. if (strInput!="")
  3. {  // 搜索框中内容不为空时响应，即弹出提示框
  4.    divPosition();
  5.    selectedIndex=-1;
  6.    objouter.innerHTML ="";
  7.    for (intTmp=0;intTmp<arrList.length;intTmp++)
  8.    {
  9.         if (arrList[intTmp].substr(0, strInput.length)==strInput)
  10.         {
  11.             addOption(arrList[intTmp]);  // 显示相似结果
  12.          }
  13.     }
  14.     objouter.style.display=''; //显示层
  15. }else{
  16.     objouter.style.display='none'; //没有内容，不显示
  17. }
  19. function addOption(value)
  20. {
  21.      objouter.innerHTML +="<div onmouseover=/"this.className='sman_selectedStyle'/" onmouseout=/"this.className=''/" onmousedown=/"document.getElementById('"+objInputId+"').value='" + value + "'/">" + value + "</div>"  
  22. }

3、自动弹出提示框：

 
  1. function getIE(e) // e为对应的文本框对象
  2. {
  3.      var pos = new Array();
  4.      var t = e.offsetTop;
  5.      var l = e.offsetLeft;
  6.      while(e=e.offsetParent)
  7.      {
  8.          t += e.offsetTop;// 文本框距上方或上层控件的位置
  9.          l += e.offsetLeft;// 文本框距左方或上层控件的位置
  10.      }
  12.      pos[0]=t;
  13.      pos[1]=l;
  14.      return pos;
  15. }
  17. function divPosition(objInput)//objInput为对应的文本框对象
  18. {
  19.     arrPos = getIE(objInput);
  20.     objouter.style.top    = arrPos[0] +20;//提示框显示在文本框下方
  21.     objouter.style.left    = arrPos[1]; 
  22.     objouter.style.width= getAbsoluteWidth(objInput);//宽度与文本框一致
  23. }

二、源代码：

1、脚本函数源代码：
  1. <script language="javascript">
  2. var intIndex=0;arrList = new Array();
  3. function test() 
  4. {    
  5.     dearray("1111,222,222a,aaa,aa1,bb,b222,b3,323313,3213,32213,dsfsdddd");
  6.     smanPromptList(arrList,"inputer1");
  7.     smanPromptList(arrList,"inputer2");
  8.     smanPromptList(arrList,"inputer3")
  9. }
  10.    
  11. function dearray(aa)//定义array
  12. {
  13.     arrList = aa.split(',');
  14.     
  15. }
  17. function getAbsoluteWidth(ob)
  18. {
  19.         return ob.offsetWidth
  20. }
  22. function smanPromptList(arrList,objInputId)
  23. {
  24.         var objouter=document.getElementById("__smanDisp") //显示的DIV对象
  25.         var objInput = document.getElementById(objInputId); //文本框对象
  26.         var selectedIndex=-1;
  27.         var intTmp; //循环用的:)
  28.         if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
  29.             //文本框失去焦点
  30.             objInput.onblur=function(){
  31.                 objouter.style.display='none';
  32.             }
  33.             //文本框按键抬起
  34.             objInput.onkeyup=checkKeyCode;
  35.             //文本框得到焦点
  36.             objInput.onfocus=checkAndShow;
  37.             function checkKeyCode(){
  38.                 var ie = (document.all)? true:false
  39.                 if (ie){
  40.                     var keyCode=event.keyCode
  41.                     if (keyCode==40||keyCode==38){ //下上
  42.                         var isUp=false
  43.                         if(keyCode==40) isUp=true ;
  44.                         chageSelection(isUp)
  45.                     }else if (keyCode==13){//回车
  46.                         outSelection(selectedIndex);
  47.                     }else{
  48.                         checkAndShow()
  49.                     }
  50.                 }else{
  51.                     checkAndShow()
  52.                 }
  53.                 divPosition()
  54.             }
  55.             function checkAndShow(){
  56.                         var strInput = objInput.value
  57.                         if (strInput!=""){
  58.                             divPosition();
  59.                             selectedIndex=-1;
  60.                             objouter.innerHTML ="";
  61.                             for (intTmp=0;intTmp<arrList.length;intTmp++){
  62.                                 if (arrList[intTmp].substr(0, strInput.length)==strInput){
  63.                                     addOption(arrList[intTmp]);
  64.                                 }
  65.                             }
  66.                             objouter.style.display='';
  67.                         }else{
  68.                             objouter.style.display='none';
  69.                     }
  71.                     function addOption(value){
  72.                         objouter.innerHTML +="<div onmouseover=/"this.className='sman_selectedStyle'/" onmouseout=/"this.className=''/" onmousedown=/"document.getElementById('"+objInputId+"').value='" + value + "'/">" + value + "</div>"    
  73.                     }
  74.             }
  76.             function chageSelection(isUp){
  77.                 if (objouter.style.display=='none'){
  78.                     objouter.style.display='';
  79.                 }else{
  80.                     if (isUp)
  81.                         selectedIndex++
  82.                     else
  83.                         selectedIndex--
  84.                 }
  85.                 var maxIndex = objouter.children.length-1;
  86.                 if (selectedIndex<0){selectedIndex=0}
  87.                 if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
  88.                 for (intTmp=0;intTmp<=maxIndex;intTmp++){
  89.                     if (intTmp==selectedIndex){
  90.                         objouter.children[intTmp].className="sman_selectedStyle";
  91.                     }else{
  92.                         objouter.children[intTmp].className="";
  93.                     }
  94.                 }
  95.             }
  97.             function outSelection(Index){
  98.                 objInput.value = objouter.children[Index].innerText;
  99.                 objouter.style.display='none';
  100.             }
  102.             function divPosition(){
  103.                 var clx,cly;
  104.                 clx=event.clientX;
  105.                 cly = event.clientY;
  106.                 objouter.style.top    = cly+10;
  107.                 objouter.style.left    = clx+20; 
  108.                 objouter.style.width= getAbsoluteWidth(objInput)
  109.             }
  110.     }
  111.     document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");
  112.     document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");
  113.         
  114. </script>

2、在HTML中引用的源代码：

  1. <body onLoad="test()">
  2.       <table border="1" align="center" cellspacing="1" bordercolor="#9CD7FF"  id="table1" style="BORDER-COLLAPSE: collapse"  >
  3.           <tr bgcolor="#99CCFF">
  4.             <td bgcolor="#CEE3FF"><font class="text">查询1</font></td>
  5.             <td bgcolor="#FFFFFF"><input type="text" id="inputer1"></td>
  6.           </tr>
  7.           <tr bgcolor="#99CCFF">
  8.             <td bgcolor="#CEE3FF"><font class="text">查询2</font></td>
  9.             <td bgcolor="#FFFFFF"><input type="text" id="inputer2"></td>
  10.           </tr>
  11.           <tr bgcolor="#99CCFF">
  12.             <td height="24" bgcolor="#CEE3FF"><font class="text">查询3</font></td>
  13.             <td height="24" bgcolor="#FFFFFF"><input type="text" id="inputer3"></td>
  14.           </tr>
  15.     </table>
  16. </body>

(《电脑报》2008年第18期)

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞