ASP.NET实验五:实现输入内容提示的功能(仿google_百度输入框提示)

实验:

       对input控件实现输入内容提示功能(仿google_百度输入框提示功能)

目的:

       优化网页交互性,学习jquery的部分操作。

知识背景:

       利用jquery中的jquery.ui.autocomplete.js插件。

      如以下jquery.ui中的基本测试代码:

<html lang="en">
<head>  
<meta charset="utf-8" />  
<title>jQuery UI Autocomplete - Default functionality</title>  
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>   
<script>
    $(function () {
        var availableTags = ["ActionScript", "测试",
  "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
   "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy",
   "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP",
    "Python", "Ruby", "Scala", "Scheme"];
        $("#tags").autocomplete({ source: availableTags });
    }); 
      </script>
</head>
<body> 
    <div class="ui-widget">  
        <label for="tags">Tags: </label>  
            <input id="tags" />
    </div> 
</body>
</html>


如图:

      

 

作为一个基础用户,暂不考虑jqury的各种功能能够以及语法结构,相信有点编程基础的都知道,在

 $("#tags").autocomplete({ source: availableTags });

这段代码中,对<input>中id为tags的控件进行了一个自动补全的绑定,补全绑定数据来源于自定义的数组availableTags。

我们需要思考的就是如何把这个提供的补全数据和我数据库中的数据进行绑定。

因此,需要了解一下.autocomplete()这个函数具体的一些参数设置。

具体可以访问网站查看:http://api.jqueryui.com/1.9/autocomplete/

这里我只把与实验有关的进行说明一下:

minLengthType: Integer   Default:1

如:

$( ".selector" ).autocomplete({ minLength: 1 });

实现的是在输入多少个字符后弹出提示框选项,一般我觉得定位1比较好,输入1个字符后开始提示,1也是默认值,当然如果想还没有输入就进行提示,可以设置为0。
官方解释如下:

    The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.

sourceType: Array orString orFunction(Object request, Function response(Object data ) )Default:none; must be specified

指定数据源,可以使数组,字符串,或者一个函数(主要与数据库交互后返回的值)

如果数据源是数组(Array)的话,可以有两种指定方式,如:

  • An array of strings: [ "Choice1", "Choice2" ]
  • An array of objects with label and value properties:[ { label: "Choice1", value: "value1" }, ... ]

       其中label为显示在提示框中的值,value为选择后插入到input控件中的值。

    如果数据源为字符串(String)的话,必须制定一个可以返回JSON数据的URL地址

        就是说这里的String必须是一个JSON结构的字符串。(JSON数据简单说就是可以理解为["str1","str2"]或[ { label: "Choice1", value: "value1" }, ... ]这样的数据值。因为这里需要的是数据源,只要指定好数据源格式标准即可,你要是有创意,也可以自己定义,总之最后把需要的字符串返回即可。

        假如提取数据的页面为http://example.com,那么传入该页面时也会传入一个作为模糊查询的参数如:temp

        因此url可以构造为http://example.com?temp=[inputstr]这里inputstr就是输入在input控件目前的值。

    如果数据源为一个交互函数function(request,response),就可以自定义请求,响应需要做的工作,如调用一个后台文件,数据库等。如:

    $("#key").autocomplete({
                    minLength: 1, source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            url: "ServerData.ashx?keyword=" + request.term,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json", 
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return { value: item};
                                }));
                            }, 
                            error: function () {
                                alert("ajax请求失败");
                            }
                        });
                    }
                })


    调用$.ajax并设置其中的type,url,contentType等参数

    如url:同String作为数据源方式类似,但是为了测试,用这种方法的一个好处是可以设置操作成功后的功能

    success:成功后执行的功能,返回提取的数据值即可;

    error:弹出对话框,请求失败(如数据库连接失败,数据查询命令错误等)

     

    实验效果截图:

     

    调用url功能ServerData.ashx主要代码:

    //作为主函数使用
            public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
                string keyword = context.Request.QueryString["keyword"]; 
                if (keyword != null)
                {           
                    JavaScriptSerializer serializer = new JavaScriptSerializer(); // 通过JavaScriptSerializer对象的Serialize序列化为["value1","value2",...]的字符串 
                    string jsonString = serializer.Serialize(GetFilteredList(keyword));
                    context.Response.Write(jsonString); // 返回客户端json格式数据
                }
            }

     

           如果用于测试:可试着在该函数上直接返回一个字符串 如: context.Response.Write("Hello World"); 然后再前台试试输入"he"看看效果。

           该函数主要功能是提取"keword"的值,即用户输入的字符串,用于模糊查询关键字,对返回的结果进行JSON格式化处理,最后返回。

            关于如何利用C#进行数据库查询在此省略,可以下载项目综合包看看(地址见末尾)。

     

    项目包简介:vs2010,sql server 2008,需要用的js,css均在压缩包中。

    index.html,atest.aspx均可作为测试页面,需要连接数据库;

    test.aspx为不与数据库进行交互,采用的是Array作为数据源的方式,可单独运行;

     数据库可在web.config中进行更改,查询语句可以再ServerData.ashx中进行修改,代码中也有注释,可参考。  

         Good  Luck ! 希望对你也有点帮助。

     

    项目包下载地址:http://download.csdn.net/detail/longteng1116/5274488

     

     

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_千鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值