JQuery AutoComplete插件实现自动完成功能解析

110 浏览量更新于2024-08-31 收藏 83KB PDF 举报

"这篇教程详细解析了如何使用JQuery的Auto Complete插件来实现自动完成功能，特别是如何将其应用于图书列表页面的搜索功能，以便在用户输入时即时显示搜索结果。教程涵盖了从下载插件、引入必要的JS和CSS文件，到在MVC项目中设置RenderSection以优化页面性能的全过程。" 在网页开发中，提供自动完成功能能够显著提升用户体验，尤其是在处理大量数据搜索时。JQuery的Auto Complete插件正是一款用于实现这一功能的高效工具。本教程将深入探讨如何利用这个插件来改进一个现有的图书列表页面的搜索功能。首先，遇到的问题是在输入特定词汇时，用户可能需要花费较长时间才能找到所需内容。通过实施自动完成，可以在用户输入时实时呈现匹配项，简化查找过程。解决这个问题的关键在于引入JQuery Auto Complete插件。你需要访问JQuery官方网站下载所需的JS和CSS文件，并将它们分别放置在MVC项目的script和content目录下。需要注意的是，JQuery库本身并不包含此插件，因此需单独下载。在MVC应用中，为了优化页面加载速度，我们通常不会在每个页面都包含所有JavaScript和CSS文件。而是通过在布局文件（_Layout.cshtml）中使用`RenderSection()`方法，让特定视图在需要时才加载额外的资源。这样可以确保只有在需要用到自动完成功能的页面才会加载相应的脚本和样式。以下是一个示例的更新后的`_Layout.cshtml`文件片段，其中定义了一个新的`RenderSection()`用于加载Auto Complete插件所需的JS和CSS： ```html <!DOCTYPE html> <html> <head> <title>_Mobile</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script> @RenderSection("scripts", required: false) </head> <body>  </body> </html> ``` 在这个例子中，`@RenderSection("scripts", required: false)`允许在特定视图中定义一个名为"scripts"的区域，用于包含Auto Complete插件的JS和CSS。这样，只有在包含该视图时，这些资源才会被加载。接下来，你需要在图书列表页面的视图（如`Search.cshtml`）中添加以下代码，以初始化Auto Complete插件并指定数据源： ```html <div class="search"> <input type="text" id="searchInput" /> @section scripts { <link href="@Url.Content("~/Content/ui.autocomplete.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.min.js")" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#searchInput").autocomplete({ source: '@Url.Action("AutoComplete", "Books")', minLength: 2 }); }); </script> } </div> ``` 这里的`source`属性指定了一个控制器方法（如`AutoComplete`），该方法将返回匹配的图书数据。`minLength`属性定义了触发自动完成的最少输入字符数。最后，在`BooksController`中，你需要创建一个`AutoComplete`动作方法，它会根据用户的输入返回匹配的图书标题： ```csharp public JsonResult AutoComplete(string term) { var books = db.Books.Where(b => b.Title.Contains(term)).Select(b => b.Title).Take(10).ToList(); return Json(books, JsonRequestBehavior.AllowGet); } ``` 这个方法根据`term`参数筛选数据库中的图书，然后返回前10个匹配项作为JSON数组。请注意，为了安全起见，你需要确保这个方法只接受GET请求（`JsonRequestBehavior.AllowGet`）。通过以上步骤，你就成功地在图书列表页面实现了基于JQuery Auto Complete的自动完成功能。用户现在只需输入少量文字，就能快速找到想要的图书，大大提升了搜索效率。

使用使用JQuery自动完成插件自动完成插件Auto Complete详解详解

主要介绍了使用JQuery自动完成插件Auto Complete详解,使用JQuery自动完成插件，更新现有图书列表页面上的搜索，当用户键入的时候立即显示

结果。,需要的朋友可以参考下

问题问题

当你查找一些特殊的东西，当你输入准确的词时，找到它可能是困难的（或者很耗时）。在输入的时候展示出结果（自动完成），使查找变得更简单。

解决方案解决方案

使用JQuery自动完成插件，更新现有图书列表页面上的搜索，当用户键入的时候立即显示结果。

讨论讨论

自动完成插件是不会象jQuery基本库一样自动包含在MVC项目中的，所以需要做的第一件事就是的是下载插件

访问http://jquery.com/。两个主要的文件是必需的：JavaScript文件和CSS文件。把新下载的javascript文件放到你MVC应用程序的script 文件夹下。CSS文件可以直接

添加到您的content目录。

这个配方也将介绍在view中使用 rendering sections。在shared文件夹下layout中自动添加了2个javascript文件和1个css文件。这些是Ajax和不唐突的Ajax和网站主css

文件。每次加载的内容越多，页面视图加载越慢。与其在每个页面都去包含可能不必要的javascript和css 文件，不如在layout中添加一个新的RenderSection()。这允许

特别的view在<head>标签去加载特别的javascript或css，但不是每页都添加他们。

下边是一个更新后的Views/Shared/_Layout.cshtml，他使用了一个新的RenderSection（）。

<!DOCTYPE html>

<html>

<head>

<title>_Mobile</title>

$(document).ready(function () {

if (window.innerWidth <= 480) {

$("link[rel=stylesheet]").attr({ href: "@Url.Content("~/Content/jquery.mobile-1.0b1.min.css")" });

}

});

</script>

@RenderSection("JavaScriptAndCSS", required: false)

</head>

<body>

<h1>My MVC Application</h1>

</div>

@Html.Partial("_LogOnPartial")

[ @Html.ActionLink("English", "ChangeLanguage", "Home", new { language = "en" }, null) ]

[ @Html.ActionLink("Français", "ChangeLanguage", "Home", new { language = "fr" }, null) ]

</div>

<li>@Html.ActionLink("Home", "Index", "Home", null, new Dictionary<string, object> {{ "data-role", "button" }})</li>

<li>@Html.ActionLink("About", "About", "Home", null, new Dictionary<string, object> { { "data-role", "button" }})</li>

</ul>

</div>

@RenderBody()

</div>

</div>

</body>

</html>

主要的CSS文件和核心的JQuery文件被留下来了，因为css在每个也都需要，并且绝大多数网页也需要JQuery。然而新的JQuery文件和不唐突的AJAX不是每个页面都

需要的。

现在，有两种方式使用Autocomplete 插件：

1.在javascript中设置要搜索的数据。

2.当用户输入时通过ajax检索。

在我使用这个插件的经验看来，我发现使用解决方案1时自动完成更快。因为它并不需要每次从数据库中请求数据。然而，使用这种解决方案的限制：只有这么多字

符，可传递到function中，大量的JavaScript可能会导致用户的计算机上页面加载缓慢。经过一些试验和错误，我已经确定神奇的数字是大约40,000个结果。如果结果数

量超过此，最好使用选项2;否则，始终坚持，因为搜索选项1是瞬时，而不是有轻微的延迟。

在这个例子中，将搜索书籍，我们没有超过40000，所以将使用选项1。BooksController现在必须更新，以设置ViewBag为book title。自动完成功能需要支持一个

JavaScript数组的支持，所以书将管道（|）分开。然后在view中，书将被转换到一个数组，使用JavaScript的split（）函数。当用户完成键入他们的结果，他们应该有

选择完全匹配标题，因此这个函数将被更新。如果只有1本书返回并且用户执行了搜索，它会自动重定向到本书详细介绍页面。

我们要在bookcontroller 中更新Index Action 并添加一个私有方法名为：FormatBooksForAutocomplete。

代码如下：

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.Entity;

using System.Linq;

using System.Linq.Dynamic;

using System.Web;

using System.Web.Mvc;

using MvcApplication.Models;

using MvcApplication.Utils;

using PagedList;

namespace MvcApplication.Controllers

{

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38653385

粉丝: 2
资源: 942

JQuery AutoComplete插件实现自动完成功能解析

jquery-autocompelete

jQuery自动完成插件autocomplete.zip

jquery自动完成插件

jQuery自动完成插件flexselect

jQuery自动完成插件autocompleter

jquery拖拽自动排序插件使用方法详解

EasyAutocomplete:jQuery自动完成插件

jquery自动完成插件收集集合

jQuery plugin for autocomplete - jQuery自动完成插件

jQuery Pagination分页插件使用方法详解

最新资源