Marco Polo，一个jQuery自动完成插件

今天，我们有Justin Stayton的来宾帖子。 他谈论了他的新开发，包括jQuery自动完成插件Marco Polo和jQuery插件Manifest，它为选择输入的多个值增加了乐趣。

让我为您提供Google的一些东西：“ jQuery自动完成插件 ”。 在过去的四年中，我已经将这个确切的短语用Google搜索了十二次。 结果实际上并没有太大改变：有很多选择，但是没有一个能激发我足够的信心来依靠生产Web应用程序。

对于我选择的jQuery插件，我非常挑剔。 如果我的用户在使用插件时遇到问题，那应该由我来决定。 我真的不想担心系统中的第三方代码，因此我开发了一项石蕊测试，jQuery插件必须通过此测试才能引起我的注意。 没有特定的顺序：必须对插件进行充分的文档记录和代码注释，在过去六个月中进行了更新维护，已知问题很少（如果有），遵循现代jQuery编码模式，并且足够灵活，可以容纳80％无需大量我永远不会使用的其他功能。 在过去的四年中，我尝试过的jQuery自动完成插件都没有一个通过此测试。

马可波罗

所以，我决定自己写。 认识Marco Polo ，这是一个为有眼光的开发人员提供的jQuery自动完成插件。 我认为您会喜欢的，尤其是如果您像我在选择jQuery插件时一样有选择性。 但是，不要只听我的话：观看现场示例 ，通读文档，然后尝试在自己的系统中实现Marco Polo。 以下是有关操作方法的快速概述。

演示版

入门

首先，确保您的HTML中同时包含了jQuery和Marco Polo：

接下来，添加文本输入（如果尚未输入）：

然后将Marco Polo附加到JavaScript中的文本输入中：

$('#userSearch').marcoPolo({
  url: '/users/search',
  formatItem: function (data, $item) {
    return data.first_name + ' ' + data.last_name;
  },
  onSelect: function (data, $item) {
    window.location = data.profile_url;
  }
});

发生搜索时，将向URL发出GET请求，并在查询字符串中添加q （搜索值）。 假设搜索了Butler 。 向/ users / search？q = Butler发出GET请求。 然后，您的后端代码必须使用q参数以JSON格式查找并返回匹配的用户：

[
  {
    first_name: 'James',
    last_name: 'Butler',
    profile_url: '/users/78749',
    …
  },
  {
    first_name: 'Win',
    last_name: 'Butler',
    profile_url: '/users/41480',
    …
  },
  …
]

每个JSON用户对象都传递给formatItem回调选项，以显示在结果列表中。 当从结果列表中选择一个用户时，他们的JSON对象将被传递到onSelect回调选项以完成浏览器重定向。

而已！ 尽管此示例演示了许多基本概念，但可能性远远超出了此处显示的简单搜索，单击，重定向设置。 自己尝试一下，我想您会对Marco Polo如此灵活的表现感到惊讶。

表现

一个jQuery插件，为选择多个输入值增加了乐趣。 电子邮件应用程序中的“收件人”字段就是一个很好的例子。 您可以只提供纯文本输入，要求用户用逗号手动分隔每个收件人。 但是，删除收件人是一件很痛苦的事情：用户必须精确地选择正确数量的文本，以确保不要意外删除过多或过少的文字。 作为一个有洞察力的开发人员，您知道用户体验应该会更好。 清单上也可以。
演示版

关于作者

Justin Stayton是德克萨斯州奥斯汀市Monk Development的首席开发人员。 您可以在GitHub和Twitter @ jstayton上找到他。

From: https://www.sitepoint.com/marco-polo/