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

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


//**********************智能搜索提示插件************************
//作者：IDDQD(2009-07-01)
//Email：[email protected]
//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