jquery插件：仿google 智能搜索提示

模仿百度,google做的一个插件,用过的朋友还请多多提意见智能搜索提示" alt="jquery插件：仿google 智能搜索提示" src="http://simg.sinajs.cn/blog/images/face/001.gif">


//**********************智能搜索提示插件************************
//作者：IDDQD(2009-07-01)
//Email：iddqd5376@163.com
//http://blog.sina.com.cn/iddqd
//版本：1.1

//说明：智能搜索提示
//该插件需绑定到输入框控件
//ajax的返回值应为：
//   <li><p>这里是搜索结果</p><span>结果数量</span></li>
//添加了上下键和回车功能

//参数设置：
//offset_top                     相对被绑定控件的top偏移
//offset_left                    相对被绑定控件的left偏移
//panel_width                    显示的搜索结果列表的宽度
//postUrl                        ajax的路径
//waterMark                      输入框的默认值
//waterMark_color                输入框默认颜色
//waterMark_change_color         输入框改变后的颜色
//choose_color                   鼠标移到结果列表上改变的颜色
//callback                       选中后执行的函数名,该函数只有一个参数为输入框的值
//**********************智能搜索提示插件*************************
(function($) {
    jQuery.fn.extend({
        searchHelp: function(opts) {
            opts = jQuery.extend({
                offset_top: 0,
                offset_left: 0,
                panel_width: $(this).width(),
                postUrl: "",
                waterMark: "请输入搜索关键词",
                waterMark_color: "#cccccc",
                waterMark_change_color: "#000000",
                choose_color: "#ffffff",
                callback: function() { return false; }
            }, opts || {});
            var _self = this;
            var _this = $(this);
            var searchIndex = -1;
            var liCount = 0;
            var searchKey = _this.val();
            _this.css("color", opts.waterMark_color).val(opts.waterMark);
            var panel = $("<div></div>");
            var panel_ul = $("<ul></ul>");

            panel.append(panel_ul).addClass("panel").css({
                "width": opts.panel_width + "px",
                "top": (_this.offset().top + opts.offset_top) + "px",
                "left": (_this.offset().left + opts.offset_left) + "px"
            });
            _this.after(panel);

            innerData = function() {
                $.get(opts.postUrl, { searchKey: "" + escape(searchKey) + "" },
                    function(data) {
                        if ($.trim(data).length > 0) {
                            panel_ul.html(data);
                            panel.fadeTo(0, 0.9).show("fast");
                            panel_ul.find("li").hover(
                                function() { $(this).css({ "background-color": opts.choose_color }); },
                                function() { $(this).css({ "background-color": "" }); }
                            ).click(function() {
                                selectKey($(this).find("p").html());
                            });
                            liCount = panel_ul.find("li").length;
                            searchIndex = -1;
                        }
                        else {
                            panel_ul.empty();
                            panel.hide();
                            liCount = 0;
                        }
                    });
            }
            keyUpDown = function keyUpDown(keyType) {
                if (!liCount) return;
                if (keyType == "up") { searchIndex--; }
                else { searchIndex++; }
                if (searchIndex < 0) { searchIndex = liCount - 1; }
                if (searchIndex >= liCount) { searchIndex = 0; }
                _this.val(panel_ul.find("p").eq(searchIndex).html());
                panel_ul.find("li").css({ "background-color": "" });
                panel_ul.find("li").eq(searchIndex).css({ "background-color": opts.choose_color });
            }
            selectKey = function searchKey(thisValue) {
                _this.val(thisValue);
                opts.callback(thisValue);
                panel.hide("slow");
            }

            _this.focus(function() {
                if (_this.val() == opts.waterMark) { _this.val("").css("color", opts.waterMark_color); }
            }).blur(function() {
                panel.hide("slow");
                if (_this.val() == "") { _this.val(opts.waterMark).css("color", opts.waterMark_color); }
            }).keyup(function(e) {
                switch (e.keyCode) {
                    case 38: { keyUpDown("up"); break; }
                    case 40: { keyUpDown("down"); break; }
                    default:
                        {
                            _this.css("color", opts.waterMark_change_color);
                            searchKey = _this.val();
                            setTimeout("innerData();", 100);
                            break;
                        }
                }
            }).keydown(function(e) {
                if (e.keyCode == 13) {
                    selectKey(_this.val());
                }
            });
            return _self;
        }
    });
})(jQuery);

下面的是CSS文件:
.panel
{
    position: absolute;
    margin: 0 auto;
    padding: 0;
    height: auto;
    overflow: hidden;
    background-color: #cfedf2;
    border: 2px solid #A1DCE6;
    color: #07519A;
    font-family: arial,sans-serif;
    z-index: 999;
    display: none;
}
.panel ul
{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    overflow: hidden;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}
.panel ul li
{
    margin: 0 auto;
    padding: 0;
    float: left;
    width: 100%;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.panel ul li p
{
    margin: 0 auto;
    padding: 0;
    width: 88%;
    margin-left: 5px;
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    font-size: 12px;
}
.panel ul li span
{
    position: absolute;
    right: 5px;
    color: #008000;
    font-size: 10px;
    text-align: right;
}

aspx的代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="js/I_Search/I_Search.css" />
    <script type="text/javascript" src="js/jquery.pack.js"></script>
    <script type="text/javascript" src="js/I_Search/I_Search.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#searchTxt").searchHelp({ postUrl: "process.ashx", offset_top: 22, callback: choose });
        });
        function choose(val) {
            alert(val);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="text" size="30" id="searchTxt" style="width: 300px;" />
    </form>
</body>
</html>

下面是重要的sql语句:
if object_id ( 'f_GetPy', 'FN' ) is not null 
drop function f_GetPy
go
create function f_GetPy(@str nvarchar(4000))  
  returns  nvarchar(4000)  
  as  
  begin  
  declare @strlen int,@re nvarchar(4000)  
  declare @t table(chr nchar(1) collate Chinese_PRC_CI_AS,letter nchar(1))  
  insert into @t(chr,letter)  
      select   '吖','A'   union   all   select   '八','B'   union   all  
      select   '嚓','C'   union   all   select   '咑','D'   union   all  
      select   '妸','E'   union   all   select   '发','F'   union   all  
      select   '旮','G'   union   all   select   '铪','H'   union   all  
      select   '丌','J'   union   all   select   '咔','K'   union   all  
      select   '垃','L'   union   all   select   '嘸','M'   union   all  
      select   '拏','N'   union   all   select   '噢','O'   union   all  
      select   '妑','P'   union   all   select   '七','Q'   union   all  
      select   '呥','R'   union   all   select   '仨','S'   union   all  
      select   '他','T'   union   all   select   '屲','W'   union   all  
      select   '夕','X'   union   all   select   '丫','Y'   union   all  
      select   '帀','Z'  
      select   @strlen=len(@str),@re=''  
      while   @strlen>0  
      begin  
          select   top   1   @re=letter+@re,@strlen=@strlen-1  
              from @t a where chr<=substring(@str,@strlen,1)  
              order by chr desc  
          if @@rowcount=0  
              select @re=substring(@str,@strlen,1)+@re,@strlen=@strlen-1  
      end  
      return(@re)  
  end 
go

//这段sql的调用查询
select top 10 [列名],count(*) as [自定义用来存放相同行的统计数量] from [表名] where left(dbo.f_GetPy([列名])," + searchKey.Length + ") like '%" + searchKey.ToUpper() + "%' group by [fName]


这是DEMO