注意事项：要使用jQuery首先要把它的包引用进来（ <script type="text/javascript" language="javascript" src="js/jquery-1.2.3.js"></script>）

本功能实现的原理简述：通过输入框的keyup事件，在后台把输入框当前的数据传入后台进行处理（以json格式传输），本例的后台处理文件是一个ashx文件。后台得到json数据后从数据库里取数据，然后回传到前台；前台显示的是一个类似百度和谷歌的下拉框，本例是这样实现的，把从后台传过来的每一个记录，通过jQuery动态生产一个<li></li>,然后把这些li放到一个div里取，再给这些li设置CSS，然后根据CSS就可以选择记录。

请看代码：

前台：

js文件：

<script language="javascript" type="text/javascript">
        
        $(function(){
        $("#keyword").bind("keyup",triggerAjax).bind("blur",input_blur);
        $("body").click(li_click); //很奇怪，在dvResult低边框以下click时不会触发li_click事件，这个问题还需改进
        });
       
        function triggerAjax()
        {   
             $.get("AutoComplete.ashx",SendingData(),callback);
        }
       
        function input_blur()
        {
            if($(".MouseOverLi").size()>0)//判断是否选择了项
            {
                $("#keyword").val($(".MouseOverLi").html());//选了某一项，则把它的值赋给输入框
                $("#dvResult").fadeOut("3000"); // 隐藏div
            }
        }
       
        function li_click()
        {
            //$("#keyword").val($(this).html());
            $("#dvResult").fadeOut("3000"); // 隐藏div
        }
       
        // 回调函数，处理从服务器端返回的数据
        function callback(data)
        {
          $("#dvResult").slideDown("3000");
           if(data!="")
           {   
                $("#dvResult").html(""); //清空前一次返回的数据
                var keys = data.split(";"); //把返回的字符串（以；分割）转变成数组
                var len = keys.length;
                for(count = 0;count<len-1;count++)
                {
                    $("#dvResult").append("<div class='item'>"+keys[count]+"</div>");
                }
               
               
                $("#dvResult").addClass("HasDataDiv");
                $(".item").mouseover(function(){$(this).addClass("MouseOverLi");});
                $(".item").mouseout(function(){$(this).removeClass("MouseOverLi");});
               
                //选中值
                $(".item").click(function(){
                    $("#keyword").val($(".MouseOverLi").html());//选了某一项，则把它的值赋给输入框
                    $("#dvResult").fadeOut("2000"); // 隐藏div
                });
            }
            else
            {
                $("#dvResult").html($("#keyword").val()+" 不存在！");
            }
        }
       
        // 向服务器端发送要处理的数据
        function SendingData()
        {
            var keyword,table,field,_json;
           
            _keyword = $("#keyword").val(); //检索用到的关键字
            _table = "Users"; //数据库名称
            _field = "userName"; //要检索的字段
           
            _json = {keyword:_keyword,table:_table,field:_field};
           
            return _json;
           
        }
    </script>

HTML：

<body  style="text-align: center">
    <form id="form1" runat="server">
    <table style="padding-top: 5px" cellpadding="0" cellspacing="0">
        <tr>
            <td style="height:5px"></td>
        </tr>
        <tr valign="top">
            <td>
                <input  id="keyword" name="keyword" type="text" />
            </td>
            <td>
                <input id="Button1" type="button" value="搜索" />
            </td>
        </tr>
         <tr>
            <td colspan="2">
                <div id="dvResult" style="text-align:left; height:100px; overflow:auto;">
                   
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>

/*******************后台处理逻辑***************************/

public class AutoComplete : IHttpHandler
{
    public AutoComplete()
    {
        //
        //TODO: 在此处添加构造函数逻辑
        //
    }

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

if (context.Request.Params["keyword"] != null && context.Request.Params["table"] != null && context.Request.Params["field"] != null)
        {

string keywordTemp=context.Request.Params["keyword"].ToString();
            string tableTemp=context.Request.Params["table"].ToString();
            string fieldTemp=context.Request.Params["field"].ToString();

string returnStr = "";
            returnStr = AutoCompleteGetResult.GetResult(keywordTemp, tableTemp, fieldTemp);
            context.Response.Clear();
            context.Response.Write(returnStr);
            context.Response.End();
        }
        else
        {
            context.Response.Clear();
            context.Response.Write("自动提示无法启动");
            context.Response.End();
        }
    }

public bool IsReusable
    {
        get
        {
            return true;
        }
    }
}

public class AutoCompleteGetResult
{
    public AutoCompleteGetResult()
    {
        //
        //TODO: 在此处添加构造函数逻辑
        //
    }
    public static string GetResult(string keyword, string tableName, string field)
    {
       
        string[] key = keyword.Split(' ');
        StringBuilder sql = new StringBuilder();
       
        sql.Append("SELECT " + field + " FROM " + tableName + " where 1=1");

for (int i = 0; i < key.Length; i++)
        {
            sql.Append(" and " + field + " like '%" + key[i] + "%'");
        }

DataTable dt = DBClass.ExecuteDataSet(sql.ToString()).Tables[0];
       
        string returnStr = "";
        try
        {
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                returnStr += Convert.ToString(dt.Rows[i][field]) + ";";
            }
           
        }
        catch { }

return returnStr;
    }
}

用jQuery的ajax的功能实现输入自动提示的功能的更多相关文章

  1. jquery 实现邮箱输入自动提示功能：（二）

    上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...

  2. jquery 实现邮箱输入自动提示功能：（一）

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...

  3. [转]jquery的ajax交付时“加载中”提示的处理方法

    本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法    方法1:使用ajaxStart方法定义一个全局的“加 ...

  4. jquery 实现邮箱输入自动提示功能

    邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...

  5. jQuery+php+Ajax文章列表点击加载更多功能

    jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...

  6. jquery的ajax提交时“加载中”提示的处理方法

    方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){    $("#loading").ajaxStart(function(){    ...

  7. AngularJS 实现的输入自动完成补充功能

    1.首先需要引入:angucomplete.js第三方库 2.增加model : var app = angular.module('app', ["angucomplete"]) ...

  8. 使用idea Live Template实现eclipse syso自动提示代码功能

    转载:http://blog.sina.com.cn/s/blog_4c4195e70102wh7e.html 具体步骤: 1.点击File-->Setting-->Live Templa ...

  9. Nginx服务rewrite模块功能说明 网站自动跳转功能

    实现域名地址信息跳转,用于做伪静态地址 www.impkk.com/oldboy?edu.html 动态地址 www.impkk.com/oldboy-edu.html 伪静态地址 rewrite ^ ...

随机推荐

  1. Web API之消息处理管道

    Web API之消息处理管道 前言 MVC有一套请求处理的机制,当然Web API也有自己的一套消息处理管道,该消息处理管道贯穿始终都是通过HttpMessageHandler来完成.我们知道请求信息 ...

  2. SQLServer 2012异常问题(一)--故障转移群集+镜像环境导致作业执行失败

    原文:SQLServer 2012异常问题(一)--故障转移群集+镜像环境导致作业执行失败 先感谢一下我的同事们最先发现此问题,鸣谢:向飞.志刚.海云 最近在生产环境发现一个诡异的问题: 环境:WIN ...

  3. Doug Lea

    如果IT的历史,是以人为主体串接起来的话,那么肯定少不了Doug Lea.这个鼻梁挂着眼镜,留着德王威廉二世的胡子,脸上永远挂着谦逊腼腆笑容,服务于纽约州立大学Oswego分校计算机科学系的老大爷. ...

  4. lua转让C++书面DLL达到“热更新”

    原创作品,请注明出处转载CSDN:http://blog.csdn.net/relar/article/details/38084689 开发游戏server往往有"热更新"的需求 ...

  5. MySQL学习系列2--MySQL执行计划分析EXPLAIN

    原文:MySQL学习系列2--MySQL执行计划分析EXPLAIN 1.Explain语法 EXPLAIN SELECT …… 变体:   EXPLAIN EXTENDED SELECT …… 将执行 ...

  6. linux tar.gz zip 减压 压缩命令

    http://apps.hi.baidu.com/share/detail/37384818 download ADT link http://dl.google.com/android/ADT-0. ...

  7. MVC客户管理（添加、修改、查询、分页）

    ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页)   目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2 ...

  8. SimpleInjector与MVC4集成，与Web Api集成，以及通过属性注入演示

    SimpleInjector与MVC4集成,与Web Api集成,以及通过属性注入演示   1,与MVC集成 见http://simpleinjector.codeplex.com/wikipage? ...

  9. paramiko socket.error: Int or String expected

    paramiko socket.error: Int or String expected paramiko的环境: Python 2.6.6 paramiko==1.14.0 正常的paramiko ...

  10. hardware_hp刀片服务器安装windows 2008系统配置

    2012年10月26日星期五 第一步. 看刀片机柜的后的OA地址 点击 OK 查看 Actlve OA 例如: 192.168.254.31 l 第二步: 连接PC 到左侧第一个接口 修改本机ip为同 ...