欢迎大家光临博仕高软(北京)科技有限公司官方网站 用户名 密码 登陆 注册
新闻动态
服务热线
地址:北京市大兴区新媒体产业基地科苑路18号华商创意中心2号楼
电话:010-57517497
传真:010-57517497
QQ:35247808
服务QQ群:535151664
35247808@qq.com
首页> 新闻动态
使用jQuery UI实现自动完成部件
作者:本站编辑 【2012年11月15日】

自动完成部件需要把新的用户界面元素放在屏幕上的合适位置。这些元素需要颜色、字体大小、背景以及其他用户界面元素所需要的典型外观项。jQuery UI依赖于主题来提供外观细节。jQuery UI主题包括一个样式表和一些图像。每个新MVC项目都是从Content目录下的"基本"主题开始的。这个主题包含一个样式表(jquery-ui.css)和一个包含若干个.png文件的images文件夹。

在使用自动完成部件以前,可以通过添加基本主题样式表到布局视图来设置应用程序,使其包括基本样式表:

  1. <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" 
  2. type="text/css" /> 
  3. <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")"  
  4. rel="stylesheet")"type="text/css" /> 
  5. <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"  
  6.        type="text/javascript"></script>    
  7. <script  src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"  
  8.        type="text/javascript"></script> 
  9. <script src="@Url.Content("~/Scripts/jquery-ui.min.js")"  
  10. type="text/javascript"></script> 

如果在一开始使用jQuery时,发现不喜欢基本主题,那么可以到站点http://jqueryui. com/themeroller/上下载一些预置主题。当然也可以创建自己的主题(使用实时预览),下载一个定制的jquery-ui.css文件。

1.  添加行为

现在还记得本章前面第8.2.3节实现的艺术家搜索功能吗?现在我们在它的基础上实现:当用户开始在搜索输入框中输入数据时,输入框显示一个该用户可能要输入的艺术家的列表。为此,首先需要从JavaScript中找到输入元素,然后在其上附加jQuery自动完成行为。一种方法是借助于MVC框架的思想,使用data-特性:

  1. <input type="text" name="q" 
  2. data-autocomplete-source="@Url.Action("QuickSearch", "Home")"/> 

按照这个思想,使用jQuery查找带有data-autocomplete-source特性的元素。这样就可以知道哪些输入元素需要实现自动完成行为。自动完成部件需要一个数据源,该数据源可以用来从中检索候选集以实现自动完成功能。自动完成功能使用内存中的数据源与它使用URL指定的远程数据源一样容易。由于艺术家的数量可能会很大,而不能将整个列表都发送到客户端,因此需要采用URL方法。我们可以把自动完成部件可能调用到的URL嵌入到data-特性中。

在MusicScripts.js文件中,我们可以在ready事件中使用下面的代码,来将自动完成功能附加到带有data-autocomplete-source特性的所有输入元素上:

  1. $("input[data-autocomplete-source]").each(function () {  
  2. var target = $(this);  
  3. target.autocomplete({ source:   
  4. target.attr("data-autocomplete-source") });  
  5. });  

jQuery的each函数将遍历封装集,并为封装集中的每一个项调用一次它的参数函数。在参数函数内部,调用目标元素的autocomplete插件方法。autocomplete方法的参数是一个选项参数,但与大多数选项参数不同的是,它有一个属性是必需的--source属性。除此之外,我们还可以设置其他的选项,比如在按键之后,自动完成跳转到其他操作以前的延迟,以及在自动完成开始发送请求到数据源之前需要的最小字符数量。

在这个例子中,我们将数据源指向了一个控制器操作,代码如下所示(前面提到过,这里用来加深印象):

  1. <input type="text" name="q" 
  2. data-autocomplete-source="@Url.Action("QuickSearch", "Home")" /> 

自动完成部件调用数据源,返回它可以用来为用户构建列表的对象集,而HomeController控制器中的QuickSearch操作需要以自动完成部件能够理解的格式返回数据。

2.  构建数据源

自动完成部件调用数据源,接收JSON格式的对象。幸亏ASP.NET MVC控制器操作可以很容易地生成JSON格式的数据,这在后面将会介绍。接收的对象必须包含一个名为label的属性,或者包含一个名为value的属性,或者二者皆有。自动完成部件在给用户展示的文本中使用的是label属性。当用户从自动完成列表中选择一个项时,自动完成部件会将选择项的值放入相关的输入元素中。如果我们既不提供label属性,也不提供value属性,自动完成部件将会使用任意可用属性作为值和标签。

为返回合适的JSON数据,我们需要按照下面的代码实现QuickSearch操作:

  1. public ActionResult QuickSearch(string term)  
  2. {  
  3.    var artists = GetArtists(term).Select(a => new {value = a.Name});  
  4.  
  5.    return Json(artists, JsonRequestBehavior.AllowGet);  
  6. }  
  7.  
  8. private List<Artist> GetArtists(string searchString)  
  9. {  
  10.    return storeDB.Artists  
  11.       .Where(a => a.Name.Contains(searchString))  
  12.       .ToList();  
  13. }  

当自动完成部件调用数据源时,它会将输入元素的当前值作为名为term的查询字符串参数传递,因此,在控制器的操作中我们可以通过一个名为term的参数来接收这个参数。注意,上面的代码是如何使用一个value属性将每一个艺术家转换成一个匿名类型的对象的呢?它是将结果集传递到可以生成JsonResult的Json方法中。当框架执行这个返回结果时,它就会将对象序列化为JSON格式的数据。
前一篇 在线广告的噩梦:IE 10开启“请勿追踪”
后一篇 网络虚拟化:科技巨头的下一个战场

版权所有:博仕高软(北京)科技有限公司官方网站  京ICP备13018047号-1  京公安备案11011502002846

  工信部备案管理系统

当前访问量:1033666次