注意事项：要使用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. Android 在非主线程无法操作UI意识

    Android在应用显示Dialog是一个非常easy事儿,但我从来没有尝试过Service里面展示Dialog. 经验UI操作要在主线程,本地的服务Service是主线程里没错,可是远程servic ...

  2. java注解（转）

    java中元注解有四个: @Retention @Target @Document @Inherited:  @Retention:注解的保留位置 @Retention(RetentionPolicy ...

  3. SharePoint 2013 中将 HTML文件转换为母版页

    原文:SharePoint 2013 中将 HTML文件转换为母版页 SharePoint 2013提供了很多新功能,下面我们看看将Html页面,转换为母版页的功能.这个功能更加方便设计人员设计母版页 ...

  4. NSIS：设置文件属性的方法

    原文 NSIS:设置文件属性的方法 在NSIS中,有以下方法可以对文件的属性进行设置.   一是通过NSIS的指令SetFileAttributes.   多重属性可用 ' | ' 隔开,有效的属性为 ...

  5. SQL操作语句中的注意点

    一 查询语句 1 distinctkeyword消除反复行 当查询的结果数据中出现反复数据时.在查询条件中加上distinctkeyword消除反复行: 如:select distinct Sno f ...

  6. CentOS7 安装zookeeper

    本章介绍CentOS的初始配置与zookeeper的安装. www.apache.org/dist/上可以下载Hadoop整个生态环境的组件,我下的Zookeeper3.4.6版本 我一般都是在一个虚 ...

  7. Rabbitmq 加入用户訪控制台(guest无法登陆控制台问题)

    对于rabbitmq的guest用户无法訪问控制台的问题,是由于rabbitmq做了安全措施,禁止guest登陆控制台.须要我们自己创建用户进行登陆 1,运行加入用户命令 rabbitmqctl ad ...

  8. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(7)-DBSession的封装

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(7)-DBSession的封装 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    ...

  9. 文《左右c++与java中国的垃圾问题的分析与解决》一bug分析

    文<左右c++与java中国的垃圾问题的分析与解决>一bug分析 DionysosLai(906391500@qq.com) 2014/10/21 在前几篇一博客<关于c++与jav ...

  10. js中prototype用法(转)

    JavaScript能够实现的面向对象的特征有:·公有属性(public field)·公有方法(public Method)·私有属性(private field)·私有方法(private fie ...