仿百度的搜索下拉提示

展开全文

http://www.cnblogs.com/forcertain/archive/2011/01/27/1946041.html

ajax的应用在当今web项目上，到处都是最常见也用的最多的地方就应该是登录、表单和搜索提示了。

今天分享下自己用到的搜索下拉提示。

第一步，是前台展示的时候：

1//输入框
2<input type="text" id="textword" onkeyup="showtip(event,this);" onkeydown="regword(this);"onclick="showtip(event,this);event.cancelBubble = true;event.returnValue = false;" />
3<input type="button" id="btnsearch" />
4//提示列表容器
5<ul id="sosotip" onclick="hiddtip()"></ul>

`1`	`第二步，是后台发回的数据格式：`

1<li id="litooltip1" onmouseover="mousestyle(this,1)" onclick="redirect(‘提示词1’)"><label>提示词1</label><span>共被搜索10次</span></li>
2<li id="litooltip2" onmouseover="mousestyle(this,2)" onclick="redirect(‘提示词2’)"><label>提示词2</label><span>共被搜索6次</span></li>
3<li id="litooltip3" onmouseover="mousestyle(this,3)" onclick="redirect(‘提示词3’)"><label>提示词3</label><span>共被搜索2次</span></li>

服务器端直接传回的是组织好的html代码，这样的话，会使传输时数据膨胀，但这样的话，把比较的复杂的处理都放到的服务器一端，实现起来更方便和简单。另外，至于样式的定位和显示，这里就不贴出来了，全凭自己兴趣，想怎么显示自己看着办。

下面，就是重点，js代码了：

001//   隐藏提示框
002function hiddtip(){var tipul = document.getElementById("sosotip");tipul.style.display="none";}
003//   键盘上下操作自动改变输入框的值
004function autotext(strtext){document.getElementById("textword").value=strtext;}
005//   点击页面其它部分时隐藏提示框
006document.body.onclick=function(){hiddtip();};
007  
008  
009var preword="";    //   记录键盘操作按下时的文本框值
010var current=0;     //   现在选择的提示列表的第几项
011var staticword="";  //  记录键盘操作按下时的文本框值，忽略上下键的操作
012  
013//   onkeydown触发时，记录此时记录文本框的值（以便onkeyup时文本框的值比较决定是否请求服务器）
014function regword(target)   
015{
016   var tempword = target.value.replace(//s/g,"");
017   if(tempword != "")
018   {
019      preword=tempword;
020   } 
021}
022  
023//  显示提示列表，文本框onkeyup和onclick时触发
024function showtip(oEvent,target)
025{
026  var sword = target.value.replace(//s/g,"");    // 此时文本框的值
027  var ulcontainer = document.getElementById("sosotip"); //提示列表容器 
028  if(sword == "")
029  {
030      ulcontainer.style.display="none";   //  文本框值为空时，隐藏提示
031  }  
032  else if(sword.length <20)
033  {
034     if(sword != preword)               // 操作后，文本框值改变
035     {  
036        current=0;
037        preword = sword;
038        if(oEvent.keyCode!="38" || oEvent.keyCode!="40")
039        {
040          staticword= preword;
041        }
042        ulcontainer.style.display="none";  
043        ulcontainer.innerHTML ="";
044             $.ajax({                               //  请求
045                 type:"GET",
046                 url:"Ashx/searchtip.ashx",
047                 data:{word:sword },
048                 success:function(result)
049                 {
050                     if(result != "0")
051                     {
052                        ulcontainer.innerHTML = result;
053                        ulcontainer.style.display="block"; 
054                     }
055                 }
056             });
057       }
058       else if(ulcontainer.innerHTML != "")//操作后文本框词未变
059       {
060           ulcontainer.style.display="block"; 
061           clearallstyle();     //   清除提示列表上的所有样式
062           if(oEvent.keyCode=="38")    //   是键盘上的向上操作时
063           {
064               current--;
065               if(current == -1)   //达到列表最上方时选中最后一个
066               {
067                  var uls = document.getElementById("sosotip");
068                  var ochilds = uls.childNodes;
069                  current = ochilds.length;
070                  addlistyle(oEvent,ochilds[current-1]); //选中最后一个
071                }
072                else
073                {
074           var fotar = document.getElementById("litooltip"+current);
075                    if(fotar != null)
076                    {
077                       addlistyle(oEvent,fotar);
078                    } 
079                    else      //   选中为第一个时再向上回到文本框
080                    { 
081                      current=0;
082                      autotext(staticword);    
083                    }
084                 } 
085            }
086            else if(oEvent.keyCode=="40")   //   是键盘上的向下操作时
087            {
088               current++;
089          var fotar = document.getElementById("litooltip"+current);
090               if(fotar != null)
091               {
092                  addlistyle(oEvent,fotar);
093               } 
094               else       //到第一个时回到文本框
095               {
096                       current=0;autotext(staticword);
097               }
098            }
099            else if(oEvent.keyCode=="13")   //  Enter键时,触发按钮
100            {
101               document.getElementById("btnsearch ").click();
102            }
103        }
104    }
105}
106//   键盘上下时为选中的项加选中样式
107function addlistyle(oEvent,target)
108{
109   target.style.cssText="background-color:#36C;color:#fff;";
110   autotext(target.childNodes[0].innerHTML);
111   oEvent.cancelBubble = true;oEvent.returnValue = false; 
112}
113  
114//   鼠标与键盘的交互，鼠标选中时按上下键可以按鼠标选中的当前上下
115function mousestyle(target,currflag)
116{
117   clearallstyle();
118   target.style.cssText="background-color:#36C;cursor:pointer;color:#fff;"; 
119   current = currflag;
120}
121// 清除提示的选中样式
122function clearallstyle()
123{
124     var uls = document.getElementById("sosotip");
125     var ochilds = uls.childNodes;
126     for(var i=0;i<ochilds.length;i++)
127     {
128         ochilds[i].style.cssText="";
129     }
130}
131//  鼠标点击某一项时触发
132function redirect(word)
133{ 
134  location.href="search.aspx?w="+encodeURI(word);
135}

其中ajax的请求用的是jquery。