搜索提示的实现(仿百度)：附源码和在线demo
这篇文章是我转载过来的，我现在做的搜索引擎项目也做了一个基于Jquery做的自动提示功能，这里就不贴了，下面我给出一个我转载的文章分享给大家，喜欢的拿去吧！
智能搜索提示的功能大家都用过，百度搜索的时候一边输入一边会有搜索提示，这样的jQuery做的ajax智能搜索提示很方便，我也决定在我的个人 网站上实现一下。不过我比百度更加提升一步，那就是不仅仅出搜索提示，而是结果不多的直接出搜索结果，当用户鼠标点击或键盘上下键选择以后回车自动到结果 页面而不是搜索结果页面。出来的效果类似下图：
而且还有一个功能，那就是支持空格和第二列重叠搜索，例如以上的示意图，我如果输入“IBM大连”，或者“大连IBM” ，或者“大连 IBM”照样能找到我需要的结果，更加智能，效果见下图：
在线demo地址：请点击此处的google链接，点击第一个结果即可打开。
功能实现思路：首先服务器端需要一个service，当前端keyup事件发生的时候检查关键词，并把匹配的智 能提示结果返回前端。需要注意的是，后端的数据如果是需要从数据库取，那会非常消耗资源，因为并非人多，keyup事件也很多，很可能你的后台就撑不住。 解决思路是从缓存取数据，不要从数据库取，数据库更新数据的时候自动更新缓存，匹配算法优化，提升匹配速度。前端可以输入完keyup一秒你再发送请求道 服务器端，以防止用户接连输入，频繁发送请求。这些都是你可以考虑的。
前端jQuery实现源代码：
$(document).ready(function() {
//加onkeyp事件，IE和firefox浏览器兼容的写法：--------------
if(document.addEventListener){
document.addEventListener("keyup",kuhandler, false);
}else{
document.attachEvent("onkeyup",kuhandler);
}
});
//处理keyup事件，注意上下键的处理来选择结果，回车键的处理
//注意特殊按键等不触发智能搜索提示---------------------------------
function kuhandler(event){
if($("#q_qsearch").attr("value")=='') $(".gac_m").remove();
if(event.keyCode==27) $(".gac_m").remove();
else if(event.keyCode==40)
{
if(menuFocusIndex >= $(".gac_a").length)
return true;
else {
forceMenuItem( menuFocusIndex+1, "#q_qsearch");
givNumber(menuFocusIndex, "#q_qsearch");
}
}else if(event.keyCode==38)
{
if(menuFocusIndex == 1){
forceMenuItem(menuFocusIndex-1, "#q_qsearch");
} else{
forceMenuItem(menuFocusIndex-1, "#q_qsearch");
givNumber(menuFocusIndex,"#q_qsearch");
}
} else if(event.keyCode==8){
$(".gac_m").remove();}
else if(!event.ctrlKey && (event.keyCode == 32 || (event.keyCode>=48 && event.keyCode<=57) || (event.keyCode>=65 && event.keyCode<=90))) {
sug($("#q_qsearch").attr("value"),"wide");}
}
//从服务器端webservice取得智能搜索提示结果并显示--------------------------------
//getPosition函数取得相对位置，结果框能粘牢搜索框-----------------------
function sug(k, wide) {
if (k.length<= 1) return;
$.get("companyquicksearch.asmx", { f: k }, function(result) {
if (result.length > 0) {
$(".gac_m").remove();
if ($("#q_qsearch").val().length == k.length) {
$("#foot").before(result);
var txt = document.getElementById('q_qsearch');
var left_new = getPosition(txt)[1];
var top_new = getPosition(txt)[0];
$(".gac_m").css({ left: left_new + "px", top: (top_new + txt.clientHeight + 2) + "px" });
menuFocusIndex = 0;
}
} else { $(".gac_m").remove(); }
});
}
//getPosition函数取得相对位置，结果框能粘牢搜索框-----------------------
function getPosition( obj )
{
var top = 0,left = 0;
do{
top += obj.offsetTop;
left += obj.offsetLeft;
}
while ( obj = obj.offsetParent );
var arr = new Array();
arr[0] = top;
arr[1] = left;
return arr;
}
var menuFocusIndex=0;
//键盘上下键选择结果的效果，鼠标经过结果的效果-----------------------
function forceMenuItem(index, id)
{
var lastMenuItem = document.getElementById( "menuItem" + menuFocusIndex )
if ( lastMenuItem != null )
{
lastMenuItem.bgColor="";
lastMenuItem.childNodes[0].style.color="#000";
lastMenuItem.childNodes[1].style.color="#666";
}
var menuItem = document.getElementById( "menuItem" + index );
if ( menuItem == null )
$(id).focus();
else
{
menuItem.bgColor="#D2EAEC";
menuItem.childNodes[0].style.color="#FFF";
menuItem.childNodes[1].style.color="#333";
menuFocusIndex = index;
}
}
//鼠标经过结果的效果-----------------------
function MouseOver(Tr){
$("#"+Tr.id).css("background-color","#D2EAEC");
$("#q_qsearch").val($("#"+Tr.id+" a").text());
$("#rjbtn").attr("role", $("#"+Tr.id+" a").attr("href"));
$("#q_qsearch").focus();
}
function MouseOut(Tr){ $("#"+Tr.id).css("background-color","#fff");}
//选中结果的效果-----------------------
function givNumber(index, id)
{
if(index <= 0) return;
var t = document.getElementById( "menuItem" + index );
if(t){
$("#q_qsearch").val($("#menuItem"+index+" a").text());
$("#rjbtn").attr("role", $("#menuItem"+index+" a").attr("href"));
$(id).focus();
}
}
CSS里面注意一点：table列的固定宽度问题 - 因为我的智能搜索提示是两列的table布局，有时候第一列某些结果很长，我设定了两列的宽度width和table的width但是在IE下没有用，后 来发现table需要加一个css属性：table-layout:fixed;这样设置各个列的宽度有作用了，有时候第一列某些结果很长也会自动 overflow:hidden。
服务端端实现源码： 随便你用啥语言实现一个webservice即可，或者一个动态页面也行啊，很基本的，菜鸟都会的，你就不用问我源码了吧。还不会的话，自己google一下“webservice源码实现”去吧，bless you。