博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
优秀的jQuery自动补齐插件和多值输入插件推荐
阅读量:6428 次
发布时间:2019-06-23

本文共 1459 字,大约阅读时间需要 4 分钟。

hot3.png

让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件)。在过去的4年中,我已经Google了很多次这个组合了。然而结果并没有变化多少。这里有很多的选择,但是没有哪一个让我能够很有信心的去应用到产品程序中。

说实话对于选择jQuery插件来说我很挑剔。如果我的用户对于插件有问题的话,那么我就得自己处理。我其实不想担心太多的第三方代码,因此我自己开发了一个jQuery使用准则用来衡量需要考虑的一些问题。没有特别的顺序:插件必须有很好的文档和注释,过去6个月内有维护和更新,很少有问题,遵循现代jQuery编码规范,非常灵活,能满足我80%的需要,没有大量我不使用的功能。没有任何一个自动补齐的插件满足上面的准则。

马可波罗(Marco Polo)

马可波罗(Marco Polo),jQuery的自动补齐插件 - Autocomplete Plugin

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

开始

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

下一步,添加输入框:

然后,将插件关联到输入框

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

马可波罗(Marco Polo),jQuery的自动补齐插件 - Autocomplete Plugin

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

转载于:https://my.oschina.net/zjczoo/blog/32285

你可能感兴趣的文章
C语言学习之指针详解
查看>>
学习使用Bing Maps Silverlight Control(一):准备和新建
查看>>
什么是Scrum
查看>>
nginx负载均衡的5种策略
查看>>
90%人都不知道:SVN 和 Git 的一些误解和真相
查看>>
防火墙配置十大任务之九,验证防火墙的运行
查看>>
【linux】浅谈Linux下的 find 指令
查看>>
CentOS 7 使用kubeadm 部署 Kubernetes
查看>>
我的友情链接
查看>>
透视美国大数据爆发全景
查看>>
java学习第一天1.2
查看>>
清空输入缓冲区的方法
查看>>
Yii2 项目优化小贴士
查看>>
UIScrollView的判断位置的属性如下:
查看>>
Applicatin Loader上传app步骤记录
查看>>
两种方法修改table表的内容
查看>>
张小龙莫慌 马化腾莫急 你们要好好的 微信还有时间
查看>>
一些常用软件静默安装参数(nsis,msi,InstallShield ,Inno)
查看>>
部署mimic版本的Ceph分布式存储系统
查看>>
Java缓冲流细节
查看>>