Asp.net文本框输入提示功能(jquery-autocomplete)

原创 2016年08月31日 15:59:36

上一篇文章讲解了jquery-ui实现文本框输入提示功能的做法,后来又发现了一个挺好用的能实现文本框输入提示功能的jquery插件jquery-autocomplete,这次讲一下他的用法。
这里写图片描述

引入所需文件

<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

版权声明:本文为博主原创文章,未经博主允许不得转载。

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

在asp.net工程中使用jQuery-ui的autocomplete功能

整理技术核心在于前端html请求调用Handler.ashx页面查询json结果返回给前端页 几乎大部分交互都是基于jQuery在前端完成,而自动完成(autocomplete)的结果需要服务器...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

asp.net开发中引用jquery后自动提示

vs开发工具,下载一个插件,之后在asp.net中引用jquery插件。在aspx页面中、纯js文件中实现自动提示技巧: 1、VS的javascript智能感知需要安装的组件地址: http://...

使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配

要实现如图所示效果,通过ajax,和Autocomplete完成匹配,整了好久,做一下记录。 实现过程如下 jsp页面:引入   添加标签用于绑定:  药店名称: auto...

jquery.autocomplete的使用

作者:lxhwss | 2011/10/11 9:46:38 | 阅读43次 document.write(””); 自动填充利用搜索和过滤,让用户快速找到并选择所需要的值。 当一个启动...

Jquery autocomplete插件的使用

简单用法: @ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>DOCTY...

Jquery autocomplete

--%>                 java.text.DecimalFormat,                 com.eastpro.util.Constants,           ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

java中用jquery AutoComplete 实现自动补全(二)后台JSON实现自动补全

java 中使用 jquery autocomplete 实现后台获取 JSON数据,实现简单的搜索功能。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Asp.net文本框输入提示功能(jquery-autocomplete)
举报原因:
原因补充:

(最多只允许输入30个字)