注意事项：要使用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. Robot Framework 使用1-环境配置及简单网站兼容性测试（转）

    0.Robot Framework 简介 Robot Framework 是一个通用的自动化测试框架,主要用于“验收测试”和“验收测试驱动开发(ATDD)” (会其它文章中会详细介绍ATDD).它使用 ...

  2. Bye，IE！服务互联网20年IE终于要退役了

    美国当地时间16日中午,Microsoft Edge官微发表了祝词:Internet Explorer 20岁生日快乐!你在过去做出了巨大贡献,今后由我继续发扬光大.服务互联网20年之后,IE终于要退 ...

  3. 具体评论ExpandableListView显示和查询模仿QQ组列表用户信息

    在我们的项目开发过程,用户通常拥有的信息包,通过组来显示用户的信息,一时候通过一定的查询条件来显示查询后的相关用户信息.而且通过颜色选择器来设置列表信息的背景颜色. 当中借鉴xiaanming:htt ...

  4. 好记心不如烂笔头，ssh登录　The authenticity of host 192.168.0.xxx can&#39;t be established.　的问题

    用ssh登录一个机器(换过ip地址),提示输入yes后,屏幕不断出现y,仅仅有按ctrl + c结束 错误是:The authenticity of host 192.168.0.xxx can't ...

  5. ReactJS入门二

    ReactJS入门学习二 ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事 ...

  6. 10个devexpress ASPxPivotGrid常见问题

    原文:10个devexpress ASPxPivotGrid常见问题 1.DXperience ASPxGridView如何开启lightweight模式 描述:ASPxGridView样式主题中pa ...

  7. 1005. 继续(3n+1)猜想 (25) （ZJUPAT 数学）

    主题链接:http://pat.zju.edu.cn/contests/pat-b-practise/1005 卡拉兹(Callatz)猜想已经在1001中给出了描写叙述.在这个题目里.情况略微有些复 ...

  8. hdu What Are You Talking About（map）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1075 map简单应用 代码: #include <stdio.h> #include &l ...

  9. crawler_UE使用技巧

    UE使用技巧 Tip 1: 如何去掉所编辑文本中包含特定字符串的行? 这则技巧是在UltraEdit的帮助文件里提到．CTRL+R 调出来替换(Replace)窗口,选中"使用正则表达式&q ...

  10. iOS开发分析&quot;秘密&quot;App内容页面的效果(两)

    @我前几天写的"秘密"的Cell制品的效果,想要的效果还是有差距,并且扩展性非常不好,于是重写封装,把总体视图都放到scrollView中,基本是和secret app 一模一样的 ...