咖啡仔

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
仿google搜索提示

借用http://www.lioil.net/lbs/article.asp?id=448的例子，再加以完善
1、实现了提示后数据排序的，按字符串由短至长，相同长度的按字母排序。

View Code 
1  findList.sort( function(a, b)
2          {
3            if(a.length>b.length)return 1;
4            else if(a.length==b.length)return a.localeCompare(b);
5            else return -1;
6             });

2、实现了不分大小写字母，按字母表排序。

View Code 
1 findList.sort( function(a, b)
2       {
3        if(a.toLowerCase()>b.toLowerCase())return 1;
4        else if(a.toLowerCase()<b.toLowerCase())return -1;
5       else return 0;
6       });

3、实现当字符串中包含有空格的情况。

 //新增了replaceAll方法
        String.prototype.replaceAll  = function(s1,s2){   
     return this.replace(new RegExp(s1,"gm"),s2);   
           }
       value=value.replaceAll(" ", "&nbsp;"); //先把空格转换成html格式,显示时再转换为空格，否则当字符串中有空格的会出错
         //显示时再转为非html格式的空格
         s=s.replaceAll("&nbsp;", " ");
     s=s.replaceAll("&amp;", "&");

4、实现了提示下拉框显示多少条记录。

  for( var i=0;i<findList.length;i++)
          {
       if(sum<10)//我这里赋为10条
       {addOption(findList[i]);sum++;}
           else{break;}
        }
View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>GOOGLE</title>
 6 </head>
 7 
 8 <body onLoad="begin()">
 9 <form name="search" action="" method="get"> 
10 <input autocomplete="off" type="text" id="wd" name="wd">
11 <input type="submit" value="OK">
12 </form>
13 </body>
14 </html>
15   <script language="javascript">把js代码拷入来就行了</script>
View Code 
  1 String.prototype.replaceAll  = function(s1,s2){   
  2      return this.replace(new RegExp(s1,"gm"),s2);   
  3  }
  4 var intIndex=0;var arrList = new Array();
  5 var findList;//自动搜索到的数据
  6 //将初始化的列表转换成数组
  7 function dearray(str)//定义array
  8 {
  9  arrList = str.split(",");
 10  intIndex = arrList.length;
 11 }
 12 
 13 //初始化下拉列表项
 14 function begin()
 15 {
 16  init();
 17 //dearray("asp,csdn,中国,a fr,asp,a 日期,Asp.net,php,jsp,dvbbs,baidu,92mk,123cha,hao123,google,3721,123456,popasp,alimama,aku,cool");
 18  dearray("中国,中华人民共和国,广东省,广州,国本,aa,an,ab,ai,ac,aand,as,AE,AR,AWao,ar,al,ap.ar,aui,avf,art,acxd,aew,are,apo,a,ar,国泊,02TANDEM,1 Luv,10milligram,11days difference,1891 By Sferra,1921 Jeans,2%,21 Things I Love,2117,27 ALAMODE,291venice,2B in style,2-Biz,2K,2ME,2MEN,2ya2yao,3 POMMES,3.1 PhillipLim,39Sixtyone,3GActualwear,3-go,3onoToePyHo,3piece,3QR,4NF,5.10,591MMM,5ive Jungle,5th STREET,667,686,6ixty 8ight,7 Diamonds,77kids,7UNION,96NY,A Child Of The Jago,A Common Thread,A DEGREE FAHRENHEIT,A Detacher,A F,A LAB,A label by Luise&Franck,A M Snyder,A mina,A Peace Treaty,A&G,A.F.Vandevorst ,A.I.C,A.KURTZ,A1A,A6,AB Studio,Abahouse,ABAN,Abigail Keats,Absolutjoy,ABSORBA");
 19  downList(arrList,"wd");
 20 }
 21 
 22 function init()
 23 {
 24  if(arrList.constructor!=Array)
 25  {
 26   alert("downList初始化失败:第一个参数非数组!");
 27   return;
 28  }
 29 
 30 // arrList.sort();
 31 /*arrList.sort( function(a, b)
 32  {
 33   if(a.length>b.length)return 1;
 34   else if(a.length==b.length)return a.localeCompare(b);
 35   else return -1;
 36  }); */
 37 }
 38 
 39 function downList(arrList,objInputId)
 40 {
 41  var objouter=document.getElementById("keysList"); //显示的DIV对象
 42  var objInput = document.getElementById(objInputId); //文本框对象
 43  var selectedIndex=-1;
 44  var intTmp; //循环用的
 45  
 46  if (objInput==null)
 47  {
 48   alert("downList初始化失败:没有找到"+objInputId+"文本框");
 49   return;
 50  }
 51  //文本框失去焦点
 52  objInput.onblur=function(){
 53   objouter.style.display="none";
 54  }
 55  //文本框按键抬起
 56  objInput.onkeyup=checkKeyCode;
 57  //文本框得到焦点
 58  objInput.onfocus=checkAndShow;
 59 
 60  //判断按下的按键
 61  function checkKeyCode(evt)
 62  {
 63   evt = evt || window.event;
 64   var keyCode = window.event ? evt.keyCode : evt.which;
 65   //var keyCode = String.fromCharCode(key);
 66   if (keyCode==40||keyCode==38)
 67   {//下上
 68    var isUp=false
 69    if(keyCode==40) isUp=true;
 70    chageSelection(isUp);
 71   }
 72   else if (keyCode==13)
 73   {//回车
 74    outSelection(selectedIndex);
 75   }
 76   else
 77   {checkAndShow(evt); }
 78   divPosition(evt);
 79  }
 80  //得到焦点显示
 81  function checkAndShow(evt)
 82  {  findList=new Array();
 83   var sum=0;//用于提示显示多行记录
 84   var strInput = objInput.value;
 85   if (strInput!="")
 86   {
 87    divPosition(evt);
 88    selectedIndex=-1;
 89    objouter.innerHTML ="";
 90    
 91    for (intTmp=0;intTmp<arrList.length;intTmp++)
 92    {
 93      var s1=arrList[intTmp].substr(0, strInput.length).toUpperCase();
 94      var s2=strInput.toUpperCase();
 95      if (s1==s2)
 96     {
 97         findList.push(arrList[intTmp]);
 98     }
 99    }
100    //按字符串由短至长，相同长度按字母排序
101  /* findList.sort( function(a, b)
102  {
103   if(a.length>b.length)return 1;
104   else if(a.length==b.length)return a.localeCompare(b);
105   else return -1;
106  }); */
107   //不分大小写排序
108   findList.sort( function(a, b)
109  {
110   if(a.toLowerCase()>b.toLowerCase())return 1;
111   else if(a.toLowerCase()<b.toLowerCase())return -1;
112   else return 0;
113  });
114    for( var i=0;i<findList.length;i++)
115    {
116        if(sum<10)
117        {addOption(findList[i]);sum++;}
118            else{break;}
119     }
120    objouter.style.display="";
121   }
122   else
123   { objouter.style.display="none"; }
124  
125   //想下拉列表里添加匹配项
126   function addOption(value)
127   {
128    value=value.replaceAll(" ", "&nbsp;"); //先把空格转换成html格式,显示时再转换为空格，否则当字符串中有空格的会出错
129    objouter.innerHTML +="<div onmouseover=this.className=\"sman_selectedStyle\";document.getElementById(\""+objInputId+"\").value=\"" + value + "\" onmouseout=this.className=\"\" onmousedown=document.getElementById(\""+objInputId+"\").value=\"" + value + "\">" + value + "</div>" 
130   }
131  
132  }//end checkAndShow()
133  function chageSelection(isUp)
134  {
135   if (objouter.style.display=="none")
136   {objouter.style.display="";}
137   else
138   {
139    if (isUp){selectedIndex++;}
140    else{ selectedIndex--;}
141   }
142   
143   var maxIndex = objouter.childNodes.length-1;
144   if (selectedIndex<0){selectedIndex=0;}
145   if (selectedIndex>maxIndex) {selectedIndex=maxIndex;}
146   for (intTmp=0;intTmp<=maxIndex;intTmp++)
147   {
148    if (intTmp==selectedIndex)
149    {
150     objouter.childNodes[intTmp].className="sman_selectedStyle";
151     //当上下键移动时，将选中的文本写到文本框中
152     var s=objouter.childNodes[intTmp].innerHTML;
153     s=s.replaceAll("&nbsp;", " ");
154     s=s.replaceAll("&amp;", "&");
155     document.getElementById(objInputId).value=s; 
156    }
157    else
158    {objouter.childNodes[intTmp].className=""; }
159   }
160  }
161  
162  function outSelection(Index)
163  { 
164     var s=objouter.childNodes[Index].innerHTML;
165      s=s.replaceAll("&nbsp;", " ");
166      s=s.replaceAll("&amp;", "&");
167       objInput.value = s;
168       objouter.style.display="none";
169  }
170  
171  //显示下拉列表项
172  function divPosition(evt)
173  {  var e = objInput;
174   var ie = (document.all)? true:false
175   //定义列表区在不同浏览器中的位置
176   if (ie)
177   { var top = 0; var left = -2;  }
178   else
179   { var top = 2; var left = 0; }
180    
181   while (e.offsetParent)
182   {
183    left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
184    top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
185    e = e.offsetParent;
186   }
187   
188   left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
189   top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
190   objouter.style.top = (top + objInput.clientHeight) + "px";
191   objouter.style.left = left + "px"; 
192   objouter.style.width= objInput.clientWidth+1 + "px";
193  }
194 
195 }//end downList()
196 
197 Number.prototype.NaN0 = function()
198 {return isNaN(this)?0:this;}
199 
200 //出现光标
201 document.write("<div id=\"keysList\" style=\"position:absolute;display:none;background:#FFFFFF;border: 1px solid #CCCCCC;font-size:14px;cursor: default;\" onblur> </div>");
202 document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");





 

posted on 2011-12-15 13:25  咖啡仔  阅读(1206)  评论(4)  编辑  收藏  举报