仿百度的搜索下拉提示
ajax的应用在当今web项目上，到处都是最常见也用的最多的地方就应该是登录、表单和搜索提示了。今天分享下自己用到的搜索下拉提示。
第一步，是前台展示的时候：
//输入框 <input type="text" id="textword" onkeyup="showtip(event,this);" onkeydown="regword(this);" onclick="showtip(event,this);event.cancelBubble = true;event.returnValue = false;" /> <input type="button" id="btnsearch" /> //提示列表容器 <ul id="sosotip" onclick="hiddtip()"></ul>
第二步，是后台发回的数据格式：
<li id="litooltip1" onmouseover="mousestyle(this,1)" onclick="redirect(‘提示词1’)"><label>提示词1</label><span>共被搜索10次</span></li> <li id="litooltip2" onmouseover="mousestyle(this,2)" onclick="redirect(‘提示词2’)"><label>提示词2</label><span>共被搜索6次</span></li> <li id="litooltip3" onmouseover="mousestyle(this,3)" onclick="redirect(‘提示词3’)"><label>提示词3</label><span>共被搜索2次</span></li>
服务器端直接传回的是组织好的html代码，这样的话，会使传输时数据膨胀，但这样的话，把比较的复杂的处理都放到的服务器一端，实现起来更方便和简单。另外，至于样式的定位和显示，这里就不贴出来了，全凭自己兴趣，想怎么显示自己看着办。
下面，就是重点，js代码了：
// 隐藏提示框
function hiddtip(){var tipul = document.getElementById("sosotip");tipul.style.display="none";}
// 键盘上下操作自动改变输入框的值
function autotext(strtext){document.getElementById("textword").value=strtext;}
// 点击页面其它部分时隐藏提示框
document.body.onclick=function(){hiddtip();};
var preword=""; // 记录键盘操作按下时的文本框值
var current=0; // 现在选择的提示列表的第几项
var staticword=""; // 记录键盘操作按下时的文本框值，忽略上下键的操作
// onkeydown触发时，记录此时记录文本框的值（以便onkeyup时文本框的值比较决定是否请求服务器）
function regword(target)
{
var tempword = target.value.replace(/\s/g,"");
if(tempword != "")
{
preword=tempword;
}
}
// 显示提示列表，文本框onkeyup和onclick时触发
function showtip(oEvent,target)
{
var sword = target.value.replace(/\s/g,""); // 此时文本框的值
var ulcontainer = document.getElementById("sosotip"); //提示列表容器
if(sword == "")
{
ulcontainer.style.display="none"; // 文本框值为空时，隐藏提示
}
else if(sword.length <20)
{
if(sword != preword) // 操作后，文本框值改变
{
current=0;
preword = sword;
if(oEvent.keyCode!="38" || oEvent.keyCode!="40")
{
staticword= preword;
}
ulcontainer.style.display="none";
ulcontainer.innerHTML ="";
$.ajax({ // 请求
type:"GET",
url:"Ashx/searchtip.ashx",
data:{word:sword },
success:function(result)
{
if(result != "0")
{
ulcontainer.innerHTML = result;
ulcontainer.style.display="block";
}
}
});
}
else if(ulcontainer.innerHTML != "")//操作后文本框词未变
{
ulcontainer.style.display="block";
clearallstyle(); // 清除提示列表上的所有样式
if(oEvent.keyCode=="38") // 是键盘上的向上操作时
{
current--;
if(current == -1) //达到列表最上方时选中最后一个
{
var uls = document.getElementById("sosotip");
var ochilds = uls.childNodes;
current = ochilds.length;
addlistyle(oEvent,ochilds[current-1]); //选中最后一个
}
else
{
var fotar = document.getElementById("litooltip"+current);
if(fotar != null)
{
addlistyle(oEvent,fotar);
}
else // 选中为第一个时再向上回到文本框
{
current=0;
autotext(staticword);
}
}
}
else if(oEvent.keyCode=="40") // 是键盘上的向下操作时
{
current++;
var fotar = document.getElementById("litooltip"+current);
if(fotar != null)
{
addlistyle(oEvent,fotar);
}
else //到第一个时回到文本框
{
current=0;autotext(staticword);
}
}
else if(oEvent.keyCode=="13") // Enter键时,触发按钮
{
document.getElementById("btnsearch ").click();
}
}
}
}
// 键盘上下时为选中的项加选中样式
function addlistyle(oEvent,target)
{
target.style.cssText="background-color:#36C;color:#fff;";
autotext(target.childNodes[0].innerHTML);
oEvent.cancelBubble = true;oEvent.returnValue = false;
}
// 鼠标与键盘的交互，鼠标选中时按上下键可以按鼠标选中的当前上下
function mousestyle(target,currflag)
{
clearallstyle();
target.style.cssText="background-color:#36C;cursor:pointer;color:#fff;";
current = currflag;
}
// 清除提示的选中样式
function clearallstyle()
{
var uls = document.getElementById("sosotip");
var ochilds = uls.childNodes;
for(var i=0;i<ochilds.length;i++)
{
ochilds[i].style.cssText="";
}
}
// 鼠标点击某一项时触发
function redirect(word)
{
location.href="search.aspx?w="+encodeURI(word);
}
其中ajax的请求用的是jquery。
