google智能提示完全实现

google智能提示完全实现

 

http://www.cnblogs.com/msconfig/archive/2009/08/21/1551666.html

 

 

在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应该更好一些 )

Code
<%@ 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 调用 非常简单

Code
<!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 的处女作就高一段落啦
谢谢对我的支持
再次提示~!
大家要转载,请注明出处(我的第一篇博文给点面子[:-)])