Net Core教程

转摘：ashx+jquery-autocomplete文本框输入提示功能Asp.net

本文主要是介绍转摘：ashx+jquery-autocomplete文本框输入提示功能Asp.net，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

   转摘：ashx+jquery-autocomplete文本框输入提示功能Asp.net    

引入所需文件

<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 Proce***equest(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 Proce***equest(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 = "{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;
        }
    }
}


这篇关于转摘：ashx+jquery-autocomplete文本框输入提示功能Asp.net的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航