使用JQuery自动完成插件AutoComplete详解资源-CSDN文库

31 浏览量 2020-10-16 19:37:57 上传评论收藏 83KB PDF 举报

jQuery Auto Complete 插件是一个非常实用的工具，用于在网页中实现自动填充功能，尤其适用于搜索框，帮助用户快速找到他们正在寻找的信息。本篇文章将深入探讨如何使用jQuery Auto Complete插件，以及如何将其整合到一个现有的图书列表页面的搜索功能中。为了使用jQuery Auto Complete，你需要确保已经包含了jQuery库。通常，这可以通过在HTML文件中引入`<script>`标签来完成，比如引入jQuery 1.6.2的最小化版本： ```html <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script> ``` 然后，你需要下载Auto Complete插件，可以从官方网站http://jquery.com/获取。主要的文件包括JavaScript文件（例如`jquery.autocomplete.js`）和CSS文件（如`jquery.autocomplete.css`）。将JavaScript文件放入你的MVC应用的`scripts`目录，CSS文件放入`content`目录。在整合到MVC项目中时，为了避免不必要的性能影响，我们通常不会在每个页面都包含这些资源。因此，我们可以利用`RenderSection()`方法在`_Layout.cshtml`文件中创建一个名为"JavaScriptAndCSS"的部分，这样只在需要的地方加载特定的JavaScript和CSS。以下是一个示例： ```html <head>  @RenderSection("JavaScriptAndCSS", required: false) </head> ``` 接下来，我们需要在需要使用Auto Complete的视图中添加这个部分，并引入所需的文件： ```html @section JavaScriptAndCSS { <link href="@Url.Content("~/Content/jquery.autocomplete.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script> } ``` 现在，我们已经为Auto Complete准备好了基础环境，接下来是实现功能的关键部分。在你的图书列表搜索框中，你可以像下面这样设置Auto Complete： ```javascript $(document).ready(function () { $("#searchInput").autocomplete({ source: function(request, response) { // 这里发送异步请求获取数据，例如通过Ajax $.ajax({ url: "/Books/Search", // 指向处理搜索请求的控制器和动作 dataType: "json", data: { term: request.term }, // 传递搜索关键字 success: function(data) { response($.map(data, function(item) { return { label: item.title, value: item.id } // 将返回的数据转化为Auto Complete所需的格式 })); } }); }, minLength: 2, // 用户输入至少2个字符后触发 select: function(event, ui) { // 当用户选择一个条目时执行的回调函数 // 可以用来导航到选定书籍的详情页面 window.location.href = "/Books/Details/" + ui.item.value; } }); }); ``` 在上面的代码中，`source`属性定义了数据源，`minLength`指定了触发自动完成的最少字符数，而`select`事件处理用户选择项后的操作。总结来说，jQuery Auto Complete插件通过提供实时搜索建议，极大地提升了用户体验。通过合理地整合到MVC项目中，我们可以在不影响整体性能的前提下，实现高效、流畅的自动完成功能。在实际应用中，可以根据需求调整配置，例如自定义搜索结果的呈现样式，或者添加更多的事件处理程序来扩展功能。

资源推荐

资源详情

资源评论

使用使用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自动完成插件Auto Complete详解

jquery-autocompelete

jQuery自动完成插件autocomplete.zip

这是一款轻量级的jquery自动完成插件

jQuery自动完成插件jQuerycompleter.zip

autocomplete, jQuery自动完成插件，如Google自动完成.zip

jquery自动完成插件

jquery自动完成插件收集集合

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

sublime text2 jQuery自动完成插件

jQuery文本框联想补全自动完成插件

支持ajax的jquery自动完成插件

jQuery自动完成插件autocompleter

jQuery时间自动完成插件

Jquery自动提示插件安装和使用Eclipse

jquery插件库(jquery.treeview插件库)

jQuery自动完成插件flexselect

jQuery UI 自动完成插件 autocompleter

精美十足的JQuery自动轮播插件

高级jQuery自动补全插件

jquery自动完成输入框

jquery自动补全插件

jquery 自动完成输入插件

jQuery打印插件jqprint，内包含使用示例

jQuery文本框联想补全自动完成插件.zip

jQuery Autocomplete自动完成插件

jQuery邮箱自动完成插件

[ jquery.autocomplete ]jquery的自动完成/补全插件(很好很强大)

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

最新资源

Qt 5实现串口调试助手（源工程文件、0积分下载）