日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索

QQ空間 QQ好友新浪微博微信

仿百度的搜索下拉提示

昵稱10525020 2012-10-12

展開全文

仿百度的搜索下拉提示

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

ajax的應(yīng)用在當(dāng)今web項目上，到處都是最常見也用的最多的地方就應(yīng)該是登錄、表單和搜索提示了。

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

第一步，是前臺展示的時候：

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`	`第二步，是后臺發(fā)回的數(shù)據(jù)格式：`

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>

服務(wù)器端直接傳回的是組織好的html代碼，這樣的話，會使傳輸時數(shù)據(jù)膨脹，但這樣的話，把比較的復(fù)雜的處理都放到的服務(wù)器一端，實現(xiàn)起來更方便和簡單。另外，至于樣式的定位和顯示，這里就不貼出來了，全憑自己興趣，想怎么顯示自己看著辦。

下面，就是重點，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;     //   現(xiàn)在選擇的提示列表的第幾項
011var staticword="";  //  記錄鍵盤操作按下時的文本框值，忽略上下鍵的操作
012  
013//   onkeydown觸發(fā)時，記錄此時記錄文本框的值（以便onkeyup時文本框的值比較決定是否請求服務(wù)器）
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時觸發(fā)
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)   //達(dá)到列表最上方時選中最后一個
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鍵時,觸發(fā)按鈕
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//   鼠標(biāo)與鍵盤的交互，鼠標(biāo)選中時按上下鍵可以按鼠標(biāo)選中的當(dāng)前上下
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//  鼠標(biāo)點擊某一項時觸發(fā)
132function redirect(word)
133{ 
134  location.href="search.aspx?w="+encodeURI(word);
135}