搜索提示的实现(仿百度):附源码和在线demo

这篇文章是我转载过来的,我现在做的搜索引擎项目也做了一个基于Jquery做的自动提示功能,这里就不贴了,下面我给出一个我转载的文章分享给大家,喜欢的拿去吧!

智能搜索提示的功能大家都用过,百度搜索的时候一边输入一边会有搜索提示,这样的jQuery做的ajax智能搜索提示很方便,我也决定在我的个人 网站上实现一下。不过我比百度更加提升一步,那就是不仅仅出搜索提示,而是结果不多的直接出搜索结果,当用户鼠标点击或键盘上下键选择以后回车自动到结果 页面而不是搜索结果页面。出来的效果类似下图:

搜索提示的实现(仿百度):附源码和在线demo_第1张图片 

而且还有一个功能,那就是支持空格和第二列重叠搜索,例如以上的示意图,我如果输入“IBM大连”,或者“大连IBM” ,或者“大连 IBM”照样能找到我需要的结果,更加智能,效果见下图:

搜索提示的实现(仿百度):附源码和在线demo_第2张图片 

在线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。

你可能感兴趣的:(前端,javascript,数据库)