注意事项：要使用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. 基于hadoop的电影推荐结果可视化

    数据可视化 1.数据的分析与统计 使用sql语句进行查询,获取所有数据的概述,包括电影数.电影类别数.人数.职业种类.点评数等. 2.构建数据可视化框架 这里使用了前端框架Bootstrap进行前端的 ...

  2. DICOM：DICOM3.0网络通信协议（延续）

    题记: 在过去的一年中一直坚持周末博客,整理工作与休闲比的点点滴滴. 新知识点.新技术的涉猎会单独成文,对于与DICOM相关的知识统一放在了DICOM医学图像处理 专栏里,事实上DICOM英文全称是D ...

  3. 每天一个JavaScript实例-canvas绘图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 关于接收POST请求 $GLOBALS['HTTP_RAW_POST_DATA']

    总是产生变量包含有原始的 POST 数据.否则,此变量仅在碰到未识别 MIME 类型的数据时产生.不过,访问原始 POST 数据的更好方法是 php://input.$HTTP_RAW_POST_DA ...

  5. oracle11g ASM(修复损坏的磁盘组头asm修复2)

    --编KFED [oracle@rac2 lib]$cd $ORACLE_HOME/rdbms/lib [oracle@rac2 lib]$ pwd /u01/app/oracle/product/1 ...

  6. Bringing up interface eth0: Device eth0 does not seem to be present, delaying initialization

    跑 service network restart  NIC出现无法启动,他说,没有发现 Bringing up interface eth0: Device eth0 does not seem t ...

  7. 一个IIS网站的异常配置的安全解决方案

    一个.如下面的错误: "/"应用server错. 安全异常 说明: 应用程序试图运行安全策略不同意的操作.要授予此应用程序所需的权限.请与系统管理员联系,或在配置文件里更改该应用程 ...

  8. uva10827-Maximum sum on a torus(矩阵最大和的变形）

    题目;uva10827-Maximum sum on a torus(矩阵最大和的变形) 题目大意:就是uva108的变形,矩阵能够连通,就是能够从后面连到前面.这里把矩阵复制三遍,然后又一次生成一个 ...

  9. [dp] hdu 4472 Count

    意甲冠军: 鉴于n节点,满足子节点的相同的树节点号的同一层较少不同的形式. 思考: dp[i][j] 代表i节点.最后,一个层j方法节点 由于满足同层节点,所以j一层又一层必须是j 整数倍 所以就能得 ...

  10. 【足迹C++primer】49、超载，变化，运营商

    超载,变化,运营商 Conversion Operators 转换操作符 operator type() const Conversions to an array or a function typ ...