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

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

<link href="@Url.Content("～/Content/Site.css")" rel="stylesheet" 
type="text/css" /> 
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")"  
rel="stylesheet")"type="text/css" /> 
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"  
       type="text/javascript"></script>    
<script  src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"  
       type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")"  
type="text/javascript"></script> 

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

1.  添加行为

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

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

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

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

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

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

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

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

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

2.  构建数据源

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

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

public ActionResult QuickSearch(string term)  
{  
   var artists = GetArtists(term).Select(a => new {value = a.Name});  
 
   return Json(artists, JsonRequestBehavior.AllowGet);  
}  
 
private List<Artist> GetArtists(string searchString)  
{  
   return storeDB.Artists  
      .Where(a => a.Name.Contains(searchString))  
      .ToList();  
}