电竞比分网-中国电竞赛事及体育赛事平台

搜索
分享

仿百度的搜索下拉提示

 昵稱(chēng)10525020 2012-10-12

仿百度的搜索下拉提示

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

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

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

       第一步，是前臺(tái)展示的時(shí)候：

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第二步，是后臺(tái)發(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代碼，這樣的話，會(huì)使傳輸時(shí)數(shù)據(jù)膨脹，但這樣的話，把比較的復(fù)雜的處理都放到的服務(wù)器一端，實(shí)現(xiàn)起來(lái)更方便和簡(jiǎn)單。另外，至于樣式的定位和顯示，這里就不貼出來(lái)了，全憑自己興趣，想怎么顯示自己看著辦。

 

      下面，就是重點(diǎn)，js代碼了：

001//   隱藏提示框
002function hiddtip(){var tipul = document.getElementById("sosotip");tipul.style.display="none";}
003//   鍵盤(pán)上下操作自動(dòng)改變輸入框的值
004function autotext(strtext){document.getElementById("textword").value=strtext;}
005//   點(diǎn)擊頁(yè)面其它部分時(shí)隱藏提示框
006document.body.onclick=function(){hiddtip();};
007  
008  
009var preword="";    //   記錄鍵盤(pán)操作按下時(shí)的文本框值
010var current=0;     //   現(xiàn)在選擇的提示列表的第幾項(xiàng)
011var staticword="";  //  記錄鍵盤(pán)操作按下時(shí)的文本框值，忽略上下鍵的操作
012  
013//   onkeydown觸發(fā)時(shí)，記錄此時(shí)記錄文本框的值（以便onkeyup時(shí)文本框的值比較決定是否請(qǐng)求服務(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時(shí)觸發(fā)
024function showtip(oEvent,target)
025{
026  var sword = target.value.replace(//s/g,"");    // 此時(shí)文本框的值
027  var ulcontainer = document.getElementById("sosotip"); //提示列表容器 
028  if(sword == "")
029  {
030      ulcontainer.style.display="none";   //  文本框值為空時(shí)，隱藏提示
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({                               //  請(qǐng)求
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")    //   是鍵盤(pán)上的向上操作時(shí)
063           {
064               current--;
065               if(current == -1)   //達(dá)到列表最上方時(shí)選中最后一個(gè)
066               {
067                  var uls = document.getElementById("sosotip");
068                  var ochilds = uls.childNodes;
069                  current = ochilds.length;
070                  addlistyle(oEvent,ochilds[current-1]); //選中最后一個(gè)
071                }
072                else
073                {
074           var fotar = document.getElementById("litooltip"+current);
075                    if(fotar != null)
076                    {
077                       addlistyle(oEvent,fotar);
078                    } 
079                    else      //   選中為第一個(gè)時(shí)再向上回到文本框
080                    { 
081                      current=0;
082                      autotext(staticword);    
083                    }
084                 } 
085            }
086            else if(oEvent.keyCode=="40")   //   是鍵盤(pán)上的向下操作時(shí)
087            {
088               current++;
089          var fotar = document.getElementById("litooltip"+current);
090               if(fotar != null)
091               {
092                  addlistyle(oEvent,fotar);
093               } 
094               else       //到第一個(gè)時(shí)回到文本框
095               {
096                       current=0;autotext(staticword);
097               }
098            }
099            else if(oEvent.keyCode=="13")   //  Enter鍵時(shí),觸發(fā)按鈕
100            {
101               document.getElementById("btnsearch ").click();
102            }
103        }
104    }
105}
106//   鍵盤(pán)上下時(shí)為選中的項(xiàng)加選中樣式
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)與鍵盤(pán)的交互，鼠標(biāo)選中時(shí)按上下鍵可以按鼠標(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)點(diǎn)擊某一項(xiàng)時(shí)觸發(fā)
132function redirect(word)
133{ 
134  location.href="search.aspx?w="+encodeURI(word);
135}

     其中ajax的請(qǐng)求用的是jquery。

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶(hù) 評(píng)論公約

    類(lèi)似文章 更多