优秀的jQuery自动补齐插件和多值输入插件推荐

让咱们Google一下"jQuery autocomplete plugin"（jquery自动补齐插件）。在过去的4年中，我已经Google了不少次这个组合了。然而结果并无变化多少。这里有不少的选择，可是没有哪个让我可以颇有信心的去应用到产品程序中。

说实话对于选择jQuery插件来讲我很挑剔。若是个人用户对于插件有问题的话，那么我就得本身处理。我其实不想担忧太多的第三方代码，所以我本身开发了一个jQuery使用准则用来衡量须要考虑的一些问题。没有特别的顺序：插件必须有很好的文档和注释，过去6个月内有维护和更新，不多有问题，遵循现代jQuery编码规范，很是灵活，能知足我80%的须要，没有大量我不使用的功能。没有任何一个自动补齐的插件知足上面的准则。

马可波罗（Marco Polo)

所以我决定本身编写一个。 了解一下马可波罗（Marco Polo)，一个为独具慧眼的开发人员准备的jQuery自动补齐插件。我认为你会喜欢它，特别是若是你也使用个人方法来选择jQuery插件的话。可是，不要仅仅听我说，你最好本身试试演示，看看文档，本身使用插件执行一下你本身的系统。这里有一个快速帮助来解释如何使用这个插件。

开始

开始先包含jQuery和马可波罗到你的HTML：

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.marcopolo.min.js"></script>

下一步，添加输入框：

<input type="text" name="userSearch" id="userSearch" />

而后，将插件关联到输入框

$('#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;
  } 
});

当搜索开始时，一个GET请求url将会经过q（搜索关键字）添加到查询字符串中。咱们使用Butler来查询。一个GET请求将建立到/users/search?q=Butler。你的后台程序必须使用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回调选项中完成浏览器重定向。

很简单吧！这个例子演示了一部分基本的概念，潜在的夸张能够更加丰富。本身尝试一下，我认为你会很惊奇马可波罗居然如此的灵活。

Manifest

Manifest是一个添加更多惊喜到多选输入的插件。Email地址中的接受字段是一个很是好的例子。你能够只简单提供通常文本输入，要求用户使用分号手工分开每个收件人。 可是移除收件人是一个费劲的事情，可是使用这个插件，你知道用户会很是高兴这种用户操做体验的。