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

原创 2016年08月29日 23:01:28

我们用谷歌、百度查东西的时候,浏览器会根据我们在搜索框中输入的关键字给出几个相似的提示项供选择。
在Asp.net Web开发中有时我们也需要实现这个功能,接下来我们借助jquery插件jquery-ui来达到这种效果,插件官网为:http://jqueryui.com/autocomplete/,大家在下载的时候注意只选择autocomplete部分,否则把其他功能的代码也一并下载下来没卵用。
这里写图片描述

引入js、css文件

<script src="JS/Autocomplete/external/jquery/jquery.js" type="text/javascript"></script>
<script src="JS/Autocomplete/jquery-ui.js" type="text/javascript"></script>
<link href="JS/Autocomplete/jquery-ui.css" rel="stylesheet" type="text/css" />

基本固定数据写法

<script type="text/javascript">
    $(document).ready(function () {
        var availableTags = [
            "Asp","BASIC","C",
            "C++","Java","JavaScript",
            "Lisp","Perl","PHP",
            "Python","Ruby"
        ];           
        $("#autocomplete").autocomplete({
            source: availableTags
        });
    });
</script>
<body>
    <form id="form1" runat="server">
    <div>
        编程语言:<input type="text" id="autocomplete" class="ui-widget" />
    </div>
    </form>
</body>

这个基本例子很简单,不过有两个知识点必须了解:
1、文本框提示的内容来源于符合特定格式的静态数据或动态数据(此处展示的是静态数据)
2、source的数据源必须是json数组,不能是其他格式的内容,否则没效果

请求aspx动态获取source数据

前台代码:

<script type="text/javascript">
    $(document).ready(function () {
        var availableTags = [
            "Asp","BASIC","C",
            "C++","Java","JavaScript",
            "Lisp","Perl","PHP",
            "Python","Ruby"
        ];      
        $.ajax({
            type: "POST",
            url: "AjaxPage.aspx/GetAllHints",
            contentType: "application/json",
            //data必须用双引号引起来
            data: "{ action: 'autoComplete', value: 'guo' }",
            dataType: "json",
            async: false,
            success: function (msg) {
                //将后台返回的数据转换成json数组形式
                var datas = JSON.parse(msg.d);
                //修改数据源的值
                availableTags = datas;
                $("#autocomplete").autocomplete({
                    source: availableTags
                });
            }
        });             
    });
</script>

aspx后台代码:

[WebMethod]
public static string GetAllHints(string action,string value)
{
    string strResult = "[\"guo\",\"tong\",\"chang\",\"wang\",\"hao\",\"bang\"]";
    return strResult;
}

请求ashx动态获取source数据

前台代码:

<script type="text/javascript">
    $(document).ready(function () {
        var availableTags = [
            "Asp","BASIC","C",
            "C++","Java","JavaScript",
            "Lisp","Perl","PHP",
            "Python","Ruby"
        ];      
        $.ajax({
            type: "POST",
            url: "Handler1.ashx",
            contentType: "application/json",
            //data不必用双引号引起来【不同点1】
            data: { action: 'autoComplete', value: 'guo' },
            dataType: "json",
            async: false,
            success: function (msg) {
                //不需要将后台返回的数据转换成json数组形式【不同点2】
                //修改数据源的值
                availableTags = msg;
                $("#autocomplete").autocomplete({
                    source: availableTags
                });
            }
        });             
    });
</script>

两个不同点指的是从aspx动态获取数据与从ashx动态获取数据之间的不同之处。
ashx后台代码:

 public void ProcessRequest(HttpContext context)
{
    string strResult = "[\"guo\",\"tong\",\"chang\",\"wang\",\"hao\",\"bang\"]";
    context.Response.Write(strResult);
}

插件免费下载地址:http://download.csdn.net/detail/xiaouncle/9616290

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

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

上一篇文章讲解了jquery-ui实现文本框输入提示功能的做法,后来又发现了一个挺好用的能实现文本框输入提示功能的jquery插件jquery-autocomplete,这次讲一下他的用法。...
  • xiaouncle
  • xiaouncle
  • 2016年08月31日 15:59
  • 1280

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

上一篇文章讲解了jquery-ui实现文本框输入提示功能的做法,后来又发现了一个挺好用的能实现文本框输入提示功能的jquery插件jquery-autocomplete,这次讲一下他的用法。...
  • xiaouncle
  • xiaouncle
  • 2016年08月31日 15:59
  • 1280

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

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

.net 通过输入文本框进行下拉式菜单的联想搜索(资料1)

打开一个空网页Default. 前台代码:
  • liheao
  • liheao
  • 2016年03月21日 16:24
  • 725

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

在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索。我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询。 那么在ASP.N...
  • tyczp
  • tyczp
  • 2017年05月06日 12:47
  • 101

web前端之自动提示的文本框

首先说一下思路,通过给文本框绑定键盘输入事件,来给div下的ul元素添加子元素,实际的应用情况应该为输入数据ajax到服务器返回输入信息的模糊查询(根据热度之类的总之是动态数据),返回数据并添加到ul...
  • qq_36936155
  • qq_36936155
  • 2017年05月23日 22:48
  • 426

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

在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索。我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询。 那么在ASP.N...
  • linshichen
  • linshichen
  • 2016年06月24日 16:36
  • 491

c#TextBox输入框自动提示、自动完成、自动补全功能

功能概览相关属性TextBox.AutoCompleteCustomSource 属性获取或设置当 TextBox.AutoCompleteSource 属性设置为 [CustomSource] 时要...
  • testcs_dn
  • testcs_dn
  • 2015年04月26日 22:05
  • 22836

jquery实现:实时提醒文本框输入状态

大家在网页上注册一个账号时,经常会看到如果用户名或者密码输入不符合规则,则会在文本框旁边即时提醒“X”或者“输入错误”等 那么这种效果是怎么实现的呢? 接下来大家请看代码?(jquery代码请大家...
  • zzp961224
  • zzp961224
  • 2016年08月12日 09:34
  • 684

asp.net 右下角弹出新提醒信息提示框

asp.net 开发信息系统,无论是OA或者是其它业务系统中,都会用到新信息提醒功能,特此将方案跟大家分享一下。先上一图给大家看一看:优点:1)、该新消息弹出提示框样式算是比较不错的,个人认为。   ...
  • taomanman
  • taomanman
  • 2015年01月07日 20:59
  • 5666
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Asp.net文本框输入提示功能(jquery-ui)
举报原因:
原因补充:

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