google智能提示完全实现

在cnblogs开博这么长时间了,没有一篇文章觉得对不起这个域名((*^__^*) 嘻嘻……)
这几天公司做一个项目要弄这个智能提升,同事网上找了段代码我整合、封装、加了一些按键什么的
就弄上了,估计还有BUG 不过暂时没有发现,先贴出来,聚聚人气吧给我的空间!
大家要转载,请注明出处(我的第一篇博文给点面子[:-)]) 不多说了看代码吧
VS2008 SP1 里有提示的!
首先
js

///<reference path="jquery1.32.js">
$.fn.extend({
    autoComplete: function(mtop, getUrl, type) {
        ///    <summary>
        ///    智能提示类是googlet, 在text的onKeyUp里调用如：onKeyUp="$(this).autoComplete(20,'defaut.aspx','autoCompleteForTeacher')"
        /// 后台必须用'├'分割连接的字符串, 这里用的事GET 方法  所以可以用 Request.QueryString["type"] 用来区别调用的那个Ajax方法(不影响程序运行)
        ///Request.QueryString["txtValue"] 是返回文本框的值 根据这个值来获取提示(还可以用Request.Params[".."])
        ///    </summary>
        ///    <param name="mtop" type="Int">
        ///        距控件顶端的距离
        ///    </param>
        ///    <param name="getUrl" type="String">
        ///         后台的返回数据的URL,这里调用的Get方法 可用Request.QueryString 或 Params
        ///    </param>
        ///    <param name="type" type="String">
        ///        后台的根据type来确定调用的方法
        ///    </param>
        var textbox = this;
        if ($("#popup").length < 1){
            var html = "<style>li.style { color: #004a7e;font-family:宋体; cursor:default} li.mouseOver { background-color: #004a7e; color: #FFFFFF; } li.mouseOut { background-color: #FFFFFF; color: #004a7e; }</style>";
            html += "<div id=\"popup\" style=\"display: none; position: absolute; z-index: 1; background-color: #ffffff;";
            html += " width: " + (parseInt(textbox.width()) + 4) + "px; border: 1px solid #2c92d3\">";
            html += " <ul id=\"popup_ul\" style=\"list-style: none;  margin: 2px; padding: 0px; text-align: left;\">";
            html += "</ul></div>";
            $("body").prepend(html);
        } else
            $("#popup").css("width", parseInt(textbox.width()) + 4);
        //清除提示内容
        var clearPopup = function() {
            $("#popup_ul").empty();
            $("#popup").hide();
        };
        //text 失去焦点提示消失
        textbox.bind("blur", function() {
            clearPopup();
        })
        var offSet = textbox.offset();
        var top = offSet.top + mtop;
        var left = offSet.left;
        $("#popup").css({
            "left": left + "px",
            "top": top + "px"
        });

        //回车取值
        if (event.keyCode == 13) {
            textbox.val($("li.mouseOver").text());
            clearPopup();
            return;
        }

        //上方向键
        if (event.keyCode == 38) {
            if ($("li.mouseOver").length > 0) {
                $("li.mouseOver").removeClass("mouseOver").prev().addClass("mouseOver");
                textbox.val($("li.mouseOver").text());
            }
            return;
        }
        //下方向键
        if (event.keyCode == 40) {
            if (!$("#popup").is(":hidden")) {
                if ($("li.mouseOver").length > 0) {
                    $("li.mouseOver").removeClass("mouseOver").next().addClass("mouseOver");
                } else {
                    $("#popup_ul li").eq(0).addClass("mouseOver");
                }
                textbox.val($("li.mouseOver").text());
                return;
            }
        }
        //ESC
        if (event.keyCode == 27) {
            clearPopup();
            return;
        }
        $.get(getUrl, { txtValue: this.val(), type: type, ts: Math.random() }, function(resp) {
            if (resp.length > 0) {
                clearPopup();
                $("#popup").show();
                var arr = resp.split("├");
                for (var i = 0; i < arr.length; i++) {
                    $("#popup_ul").append("<li class='style'><span>" + arr[i] + "</span></li>");
                    $("#popup_ul li").bind("mousedown", function() {
                        //加载
                        textbox.val(this.innerText);
                        clearPopup();
                    }).hover(
                    //鼠标经过时高亮
                            function() {
                                $("li.mouseOver").removeClass("mouseOver");
                                $(this).addClass("mouseOver")
                            },
                            function() {
                                $(this).removeClass("mouseOver")
                            })
                }

            } else {
                clearPopup();
            }
        });

    }
});

C#我用的是Ashx (Web WebService应该更好一些 )

<%@ WebHandler Language="C#" Class="AutoComplete" %>

using System;
using System.Web;
using System.Web.SessionState;
using System.Text;
using System.Collections.Generic;

public class AutoComplete : IHttpHandler, IRequiresSessionState
{
    public void ProcessRequest(HttpContext context)
    {
        try
        {

            context.Response.ContentType = "text/plain";
            context.Response.Clear();
            if (context.Request.Params["type"] == null || context.Request.Params["txtValue"] == null)
                return;
            string sInput = context.Request.Params["txtValue"].ToString();
            StringBuilder sResult = new StringBuilder();
            string type = context.Request.Params["type"].ToString();
            switch (type)
            {
                //获取所有老师
                case "GetTeacher":
                    {
                        //这里可能会有错,其实没有什么 这里事 查询数据库返回的一个集合而已
                        //sql='select name from table where name like '%"+sInput+"%'' 如果要按前面的匹配而不是全部匹配的话就
                        ////sql='select name from table where name like '"+sInput+"%'' 及去掉前面的 %
                        List<Teacher> list = ClassBLL.GetTeacher(sInput);
                        foreach (Teacher t in list)
                        {
                            sResult.Append(t.Tea_Name + "├");
                        }
                    }
                    break;
                //获取班级
                case "GetClass":
                    {
                        //这里可能会有错,其实没有什么 这里事 查询数据库返回的一个集合而已
                        //sql='select name from table where name like '%"+sInput+"%'' 如果要按前面的匹配而不是全部匹配的话就
                        ////sql='select name from table where name like '"+sInput+"%'' 及去掉前面的 %
                        List<Curriculum_Schedule> list = StudentBLL.GetClass(sInput);
                        foreach (Curriculum_Schedule t in list)
                        {
                            sResult.Append(t.Curr_Name + "├");

                        }
                    }
                    break;
                //其他退出
                default:
                    break;

            }
            string text = sResult.ToString();
            //去掉最后一个"├"
            if (text.Length > 0)
                text = sResult.ToString().Substring(0, sResult.ToString().Length - 1);
            
            //相信这个很简单的 希望对大家有帮助
            context.Response.Write(text);
        }
        catch (Exception e)
        {
            context.Response.Write(e.Message);
        }
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

html 调用 非常简单

<!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>
    <title></title>
    <script src="jquery1.32.js" type="text/javascript"></script>
    <script src="jquery.complete.js" type="text/javascript"></script>
</head>
<body>
    <form>
    <div>
    <input type="text" onKeyUp="$(this).autoComplete(20,'AutoComplete.ashx','GetTeacher')" /><br />
     <input type="text" onKeyUp="$(this).autoComplete(20,'AutoComplete.ashx','GetClass')" />
    </div>
    </form>
</body>
</html>

 这里CSDN 可以下载完整例子(呵呵)
 http://download.csdn.net/source/1594919

我的cnblog.com/msconfig 的处女作就高一段落啦
谢谢对我的支持
再次提示~!
大家要转载,请注明出处(我的第一篇博文给点面子[:-)])