http://www.cnblogs.com/forcertain/archive/2011/01/27/1946041.html
ajax的应用在当今web项目上,到处都是最常见也用的最多的地方就应该是登录、表单和搜索提示了。今天分享下自己用到的搜索下拉提示。
第一步,是前台展示的时候:
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" /> |
5 | < ul id = "sosotip" onclick = "hiddtip()" ></ ul > |
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代码了:
002 | function hiddtip(){var tipul = document.getElementById("sosotip");tipul.style.display="none";} |
004 | function autotext(strtext){document.getElementById("textword").value=strtext;} |
006 | document.body.onclick=function(){hiddtip();}; |
009 | var preword=""; // 记录键盘操作按下时的文本框值 |
010 | var current=0; // 现在选择的提示列表的第几项 |
011 | var staticword=""; // 记录键盘操作按下时的文本框值,忽略上下键的操作 |
013 | // onkeydown触发时,记录此时记录文本框的值(以便onkeyup时文本框的值比较决定是否请求服务器) |
014 | function regword(target) |
016 | var tempword = target.value.replace(//s/g,""); |
023 | // 显示提示列表,文本框onkeyup和onclick时触发 |
024 | function showtip(oEvent,target) |
026 | var sword = target.value.replace(//s/g,""); // 此时文本框的值 |
027 | var ulcontainer = document.getElementById("sosotip"); //提示列表容器 |
030 | ulcontainer.style.display="none"; // 文本框值为空时,隐藏提示 |
032 | else if(sword.length <20) |
034 | if(sword != preword) // 操作后,文本框值改变 |
038 | if(oEvent.keyCode!="38" || oEvent.keyCode!="40") |
042 | ulcontainer.style.display="none"; |
043 | ulcontainer.innerHTML =""; |
046 | url:"Ashx/searchtip.ashx", |
048 | success:function(result) |
052 | ulcontainer.innerHTML = result; |
053 | ulcontainer.style.display="block"; |
058 | else if(ulcontainer.innerHTML != "")//操作后文本框词未变 |
060 | ulcontainer.style.display="block"; |
061 | clearallstyle(); // 清除提示列表上的所有样式 |
062 | if(oEvent.keyCode=="38") // 是键盘上的向上操作时 |
065 | if(current == -1) //达到列表最上方时选中最后一个 |
067 | var uls = document.getElementById("sosotip"); |
068 | var ochilds = uls.childNodes; |
069 | current = ochilds.length; |
070 | addlistyle(oEvent,ochilds[current-1]); //选中最后一个 |
074 | var fotar = document.getElementById("litooltip"+current); |
077 | addlistyle(oEvent,fotar); |
079 | else // 选中为第一个时再向上回到文本框 |
082 | autotext(staticword); |
086 | else if(oEvent.keyCode=="40") // 是键盘上的向下操作时 |
089 | var fotar = document.getElementById("litooltip"+current); |
092 | addlistyle(oEvent,fotar); |
096 | current=0;autotext(staticword); |
099 | else if(oEvent.keyCode=="13") // Enter键时,触发按钮 |
101 | document.getElementById("btnsearch ").click(); |
107 | function addlistyle(oEvent,target) |
109 | target.style.cssText="background-color:#36C;color:#fff;"; |
110 | autotext(target.childNodes[0].innerHTML); |
111 | oEvent.cancelBubble = true;oEvent.returnValue = false; |
114 | // 鼠标与键盘的交互,鼠标选中时按上下键可以按鼠标选中的当前上下 |
115 | function mousestyle(target,currflag) |
118 | target.style.cssText="background-color:#36C;cursor:pointer;color:#fff;"; |
122 | function clearallstyle() |
124 | var uls = document.getElementById("sosotip"); |
125 | var ochilds = uls.childNodes; |
126 | for(var i=0;i<ochilds.length;i++) |
128 | ochilds[i].style.cssText=""; |
132 | function redirect(word) |
134 | location.href="search.aspx?w="+encodeURI(word); |
其中ajax的请求用的是jquery。