引入所需文件

<script type="text/javascript" src="JS/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="JS/jquery.autocomplete.min.js"></script>

<link href="CSS/jquery.autocomplete.css" rel="stylesheet" />

动态单属性数据源

前台代码：

$(document).ready(function () {

    $("#txtAutoComplete").autocomplete("AutoComplete.ashx", {

        max: 10,             //列表里的条目数

        minChars: 1,         //自动完成激活之前填入的最少字符

        scrollWidth: 173,    //提示的宽度，溢出隐藏

        scrollHeight: 200,   //提示的高度，溢出显示滚动条

        scroll: true,        //是否显示滚动条

        matchContains: true, //包含匹配，是否只显示匹配项

        autoFill: false,     //自动填充

        //此处实际请求的URL为"AutoComplete.ashx?q='[你在txtAutoComplete中输入的值]'&action='autoComplete'&value='guo'"

        extraParams: { action: "autoComplete", value: "guo" },

        //格式化列表中的条目 row:条目对象,i:当前条目index,max:总条目数

        formatItem: function (row, i, max) {

            //【不用转化为js对象，但必须返回row.toString()】

            return row.toString();

        },

        //配合formatItem使用，作用在于，由于使用了formatItem，所以显示的条目内容有所改变，

        //而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据

        formatMatch: function (row, i, max) {

            //【不用转化为js对象，但必须返回row.toString()】

            return row.toString();

        },

        //设置用户选择某一条目后文本框显示的内容

        formatResult: function (row) {

            //【不用转化为js对象，但必须返回row.toString()】

            return "文本框显示的结果：" + row.toString();

        }

    }).result(function (event, row, formatted) {

        //获取用户选择的条目

        alert(row.toString());

    });

});

<body>

    <form id="form1" runat="server">

        请输入：<input type="text" id="txtAutoComplete" />

    </form>

</body>

AutoComplete.ashx后台代码：

public class AutoComplete : IHttpHandler

{

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        //text表示用户在文本框输入的内容

        string text = context.Request.QueryString["q"];

        string action = context.Request.QueryString["action"];

        string value = context.Request.QueryString["value"];

        <!--各项之间必须用"\n"隔开，不能用","隔开-->

        string strResult = "guo\ntong\nchang\nwang\nhao\nbang";

        context.Response.Write(strResult);

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}

动态多属性数据源

前台代码：

$(document).ready(function () {

    $("#txtAutoComplete").autocomplete("AutoComplete.ashx", {

        max: 10,             //列表里的条目数

        minChars: 1,         //自动完成激活之前填入的最少字符

        width: 173,          //提示的宽度，溢出隐藏

        scrollHeight: 200,   //提示的高度，溢出显示滚动条

        scroll: true,        //是否显示滚动条

        matchContains: true, //包含匹配，是否只显示匹配项

        autoFill: false,     //自动填充

        //此处实际请求的URL为"AutoComplete.ashx?q='[你在txtAutoComplete中输入的值]'&action='autoComplete'&value='guo'"

        extraParams: { action: "autoComplete", value: "guo" },

        //格式化列表中的条目，使其以自定义格式显示

        //row:条目对象,i:当前条目index,max:总条目数

        formatItem: function (row, i, max) {

            //转换成js对象 【不同点1】

            var obj = eval('(' + row + ')');

            return i + "/" + max + "： " + obj.key + obj.value;

        },

        //配合formatItem使用，作用在于，由于使用了formatItem，所以显示的条目内容有所改变，

        //而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据

        formatMatch: function (row, i, max) {

            //转换成js对象

            var obj = eval('(' + row + ')');

            return "Match：" + obj.key + row.value;

        },

        //设置用户选择某一条目后文本框显示的内容

        formatResult: function (row) {

            //转换成js对象

            var obj = eval('(' + row + ')');

            return "文本框显示的结果：" + obj.key;

        }

    }).result(function (event, row, formatted) {

        //获取用户选择的条目,并转换成js对象

        var obj = eval('(' + row + ')');

        alert(obj.key);

    });

});

<body>

    <form id="form1" runat="server">

        请输入：<input type="text" id="txtAutoComplete" />

    </form>

</body>

AutoComplete.ashx后台代码：

public class AutoComplete : IHttpHandler

{

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        //text表示用户在文本框输入的内容

        string text = context.Request.QueryString["q"];

        string action = context.Request.QueryString["action"];

        string value = context.Request.QueryString["value"];

        <!--数据格式【不同点2】-->

        <!--各项之间必须用"\n"隔开，不能用","隔开-->

        string strResult = "{key:\"one\",value:\"第一\"}\n"+

                           "{key:\"two\",value:\"第二\"}\n"+

                           "{key:\"three\",value:\"第三\"}\n"+

                           "{key:\"four\",value:\"第四\"}\n"+

                           "{key:\"five\",value:\"第五\"}\n"+

                           "{key:\"six\",value:\"第六\"}";

        context.Response.Write(strResult);

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}

jquery.autocomplete.min.js文件免费下载地址：http://download.csdn.net/detail/xiaouncle/9618021 
jquery.autocomplete.css文件免费下载地址：http://download.csdn.net/detail/xiaouncle/9618024

转摘：http://blog.csdn.net/xiaouncle/article/details/52372974

转摘：ashx+jquery-autocomplete文本框输入提示功能Asp.net的更多相关文章

  1. Jquery实现文本框输入提示

    一些用户体验好的表单都会在文本框里设置输入提示,文本框获取焦点时,提示内容消息,如果未输入,失去焦点时又会出现提示. 网上找到一个比较好用的控件jquery.inputDefault.js 使用方法: ...

  2. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

  3. ASP.NET输入文本框自动提示功能

    在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需 ...

  4. Jquery 限制文本框输入字数【转】

    <script type="text/javascript" src="js/jquery.min.js" ></script> < ...

  5. 使用jquery实现文本框输入特效：文字逐个显示逐个消失反复循环

    前两天看到某个网站上的输入框有个小特效:文字逐个显示,并且到字符串最大长度后,逐个消失,然后重新循环显示消失,循环显示字符串数组.我对这个小特效有点好奇,于是今天自己尝试用jquery写一个简单的小d ...

  6. jquery判断文本框输入的是非数字内容（交流QQ群：452892873）

    isNaN($(this).val())==false   输入的是数字, isNaN($(this).val())==true  输入的是非数字内容

  7. jQuery限制文本框的输入长度

    jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () { $(document).on("keypress", ".txt-val ...

  8. 用Jquery控制文本框只能输入数字和字母

    用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...

  9. JQuery 限制文本框只能输入数字和小数点

    $(function(){ /*JQuery 限制文本框只能输入数字*/ $(".NumText").keyup(function(){ $(this).val($(this).v ...

随机推荐

  1. Cassandra 数据模型设计，根据你的查询来制定设计——反范式设计本质：空间换时间

    转自:http://www.infoq.com/cn/articles/best-practice-of-cassandra-data-model-design 不要把Cassandra model想 ...

  2. 来自lombok的注解(解决idea中的找不到get,set方法，找不到log的问题)

    今天看代码,发现idea报错,仔细一看调用的get,set方法bean中都没有,但是运行起来却没有问题,这个让我很疑惑.后来发现在类上有一个以前没见过的注解@Data,大概就是因为有他的原因.这个注解 ...

  3. [eShopOnContainers 学习系列] - 01 - Roadmap and Milestones for future releases

    https://github.com/dotnet-architecture/eShopOnContainers/wiki/01.-Roadmap-and-Milestones-for-future- ...

  4. 201621123003《Java程序设计》第一周学习总结

    #1. 本周学习总结 本周主要学习了Java的jdk.jvm.jre等基本概念,Java的发展史,知道Java语言的跨平台.面向对象等主要特点,简单了解了Java程序的编译和运行过程.对于学习Java ...

  5. AngularJs 中的transclude的理解

    Transclude是一个配置, 为了告诉AngularJs去获取当前指令模版内部的所有内容(实际使用ng-transclude), 更多关于怎么创建一个包含其他元素的指令: documentatio ...

  6. 题目一：给出一个n,代表有从1到n的数字[1,2,3,··· n]，问可以构成多少种二叉搜索树？

    题目一:给出一个n,代表有从1到n的数字[1,2,3,··· n],问可以构成多少种二叉搜索树? 一开始的想法是直接递归构造,时间复杂度是指数上升:后来想法是找规律:先看例子: n = 1, 有一个元 ...

  7. Django 之Ajax

    必备知识:json 什么是json 定义 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 它基于 ECMAScript (w3c制定的 ...

  8. LeetCode — （1）

    摘要: Nim Game.WordPattern.Move zeros.First Bad version.Ugly Number五个算法的python实现. 一个月多没更新,大概是因为状态一直不太好 ...

  9. matlab数据流仿真和时间流仿真

    simulink 使用的动态系统仿真,仿真需要求状态方程和输出方程,关键是求状态方程,而状态方程的求解有多种算法,可变步长和定步长,所以仿真时对求解器的选择和步长的设置就比较重要. 所谓基於数据流的仿 ...

  10. gitlab Failed to register this runner. Perhaps you are having network problems runner 注册失败问题解决

    1. 低版本安装地址 https://gitlab-ci-multi-runner-downloads.s3.amazonaws.com/v1.11.2/index.html   2. 使用 yum ...