资讯频道 → Web前端
阅读更多

10顶
3踩

Web前端

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

2011-09-15 09:37 by 资深记者 jjfat 评论(10) 有10804人浏览
jQuery JavaScript

让我们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回调选项中完成浏览器重定向。

很简单吧！这个例子演示了一部分基本的概念。自己尝试一下，我认为你会很惊奇马可波罗竟然如此的灵活。

 

演示：DEMO

 

下载：https://github.com/jstayton/jquery-marcopolo

 

Manifest——多值输入插件

 

 

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

 

演示：DEMO

 

下载：https://github.com/jstayton/jquery-manifest

 

 

原文：Justin Stayton - jquery4u.com  

 

10
顶
3
踩
评论 共 10 条 请登录后发表评论
10 楼 wx383686143 2012-01-18 18:40
救星啊，正是我要找的。。。
9 楼 jdkleo 2011-09-16 11:20
我也没试出什么效果？
8 楼 shaoqingtang 2011-09-16 10:07
菜鸟想学习一下都搞不定啊，一直没出来效果，有高手可以指教一下么？
7 楼 流浪鱼 2011-09-16 09:29
支持下lz
6 楼 xinxian 2011-09-16 08:55
兼容性太差了，在ie下无视你，用ff那个圈超慢，n久才出来结果，而且结果实在不敢恭维，都不按输入的排序的，有的没有那字母它也出来了
5 楼 Angi 2011-09-15 20:08
嗯，有点意思！
4 楼 tomatojackky 2011-09-15 16:17
兼容性太差
3 楼 zuiyanwangyue 2011-09-15 12:36
官方的就可以啊 jQuery UI中不是有combo吗？我一直在用
2 楼 web118.com 2011-09-15 10:47
  
1 楼 lvxiangjack 2011-09-15 10:36
  好东西啊。楼下的用力顶啊！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • kettle官网插件开发demo

    平时使用kettle进行推送数据比较方便，可视化操作，不需要写代码，但是有些时候提供的插件不满足我们的需求，我们需要进行自定义插件的开发来满足我们的需求，所以官方提供了开发插件的demo例子，方便我们进行二次...

  • kettle插件开发(原创)

    kettle插件开发(原创) 首先是kettle介绍，然后是kettle目前支持的插件开发，接着转入正题以一个真实的kettle插件开发例子详细介绍kettle插件开发步骤，欢迎下载。

  • 学习kettle插件

    Kettle插件体系 最近公司内有业务系统到数据中心同步的升级改造需求，从各个业务系统收集增量数据到数据中心的数据仓库平台。因为开发周期短暂，需要快速的响应，开发出可用的产品，所以决定借鉴开源程序Kettle...

  • kettle插件开发pom配置

    看过网上很多介绍kettle插件开发的博文，在真正开发之前存在很多繁琐的工作，例如：将kettle工具中的lib包安装到本地maven仓库。通常会执行如下操作： 打开kettle/data-integration/lib目录，执行如下命令 mvn ...

  • kettle连接es_Kettle Elasticsearch插件升级

    一、背景二、升级步骤2.1 源码导入2.2 版本号修改...这样的体系结构涉及到hive数据迁移到ES的过程，计划用kettle的ES批量加载插件加载数据到ES，在实际开发中发现kettle连不上ES集群。我们ES是5.5.1版本，而kettle...

  • Pantaho Kettle转换步骤插件开发

    1.3 Kettle插件 2 Kettle转换步骤插件开发 2.1 Kettle转换步骤插件开发概述 2.1.1 Kettle转换步骤插件至少需要实现四个接口 2.1.2 Kettle转换步骤插件各个类命名推荐规则 2.2 Kettle转换步骤插件开发例子 ...

  • kettle自定义插件开发-官网demo集成与调式

    一 下载官网插件源码demo https://sourceforge.net/projects/pentaho/files/ 找到自己需要的版本插件，这里以8.3.0.0-371为例 下载地址：...

  • Kettle转换步骤插件开发简介

    1.kettle介绍 2.kettle支持的插件开发 3.实战一个kettle转换步骤开发例子 4.如需源代码和部署文件可联系msnforzwwu@hotmail.com

  • 最全Kettle详解

    本文主要全面讲解Kettle，包含kettle的发展历程、kettle简介、kettle相关俗语、kettle系统架构(kettle设计与组成)、kettle的功能模块、kettle的执行流程、kettle商业版和社区版的区别、etl工具对比等内容，内容较多...

  • kettle软件 转换和作业_kettle转换和作业插件开发及调试

    今天索性将这篇文档发布出来，分享给大家，例子等有空再补上。这是一篇基于kettle3.2基础上完成的kettle插件文档。然而现在最新版的kettle的界面已经完全变了样了，但是那些组件还是那么熟悉。对数据处理稍微熟悉点...

  • Kettle简介

    Kettle简介

  • 一篇搞定，Kettle详细教程

    本文主要以Kettle概述、Kettle开发环境部署、mac m1 kettle安装、linux kettle安装、kettle集群安装部署、kettle输入、kettle输出、kettle转换、kettle批量加载、kettle流程、kettle脚本、kettle的Java代码案例、...

  • Kettle Plugin插件开发指导

    1. Kettle插件开发介绍 2. 搭建kettle源代码环境 3. 在Eclipse中构建kettle项目 4. 在Eclipse中构建插件项目 5. 配置插件到Kettle中 6. Kettle项目启动 7. 在kettle项目集成插件源代码

  • kettle plugin 插件开发

    kettle插件调试比较麻烦，因为是两个不同工程的依赖，但是大家如果掌握方法，其实也很简单，回顾JAVA常用的调试手法，如Link Source、JAVA远程调试，如果大家了解maven，甚至可以直接依赖调试，下面我来作重讲讲前面...

  • SequoiaDB的 Kettle插件

    缘起近期公司有意向使用SequoiaDB，我也就对SequoiaDB的 Kettle插件做了一些测试，发现这个插件做的还是有点太简单了。所以着手对这个插件做了一些改动。 这里可以下载 由于时间关系我只对我用到的部分功能做了...

  • kettle教程：spoon kettle数据转换示例

    以下是Spoon的一些主要特点和功能：图形化界面：Spoon提供了一个直观的图形用户界面，使用户可以通过拖放和连接各种组件来设计ETL流程。这种可视化方式简化了作业的设计过程，使用户更容易理解和管理数据流。

  • kettle简单使用-将CSV转换为Excel文件_操作过程---大数据之kettle工作笔记003

    这里也是要选择一个输出到哪个目录,并且写上文件名,但是注意文件名不要加.xls。因为后面有个扩展名是xls,如果写输出文件的时候加了,会有两个xls了就。双击 以后 然后选择 浏览 选择一个csv文件,然后 点击获取字段。...

  • COMSOL激光增材制造技术：热流力三场耦合模型的构建与模拟研究,COMSOL激光增材制造中热-流-力三场耦合模型的研究与应用：基于固体传热、固体力学、层流和动网格技术的多物理场分析,comsol激光

    COMSOL激光增材制造技术：热流力三场耦合模型的构建与模拟研究,COMSOL激光增材制造中热-流-力三场耦合模型的研究与应用：基于固体传热、固体力学、层流和动网格技术的多物理场分析,comsol激光增材制造热-流-力三场偶合模型 选用固体传热，固体力学，层流和动网格，考虑热物性以及马兰戈尼效应、表面张力，相变潜热，热对流和热辐射等 【软件工具】COMSOL5.6 【备注】，comsol三维模型 ,核心关键词：comsol; 激光增材制造; 热-流-力三场偶合模型; 固体传热; 固体力学; 层流; 动网格; 热物性; 马兰戈尼效应; 表面张力; 相变潜热; 热对流; 热辐射; COMSOL5.6; 三维模型。,COMSOL 5.6激光增材制造三场耦合模型

  • 基于PLL的SMO滑模观测器算法在永磁同步电机无传感器矢量控制中的应用及其与反正切SMO的对比：有效消除转速抖动,基于PLL的SMO滑模观测器算法在永磁同步电机无传感器矢量控制中的应用及其与反正切SM

    基于PLL的SMO滑模观测器算法在永磁同步电机无传感器矢量控制中的应用及其与反正切SMO的对比：有效消除转速抖动,基于PLL的SMO滑模观测器算法在永磁同步电机无传感器矢量控制中的应用及其与反正切SMO的对比：有效消除转速抖动,基于PLL的SMO滑模观测器算法，永磁同步电机无传感器矢量控制，跟基于反正切的SMO做对比，可以有效消除转速的抖动。 ,基于PLL的SMO滑模观测器算法; 永磁同步电机无传感器矢量控制; 反正切SMO; 转速抖动消除。,基于PLL SMO滑模观测器：永磁同步电机无传感器矢量控制新算法，优化抖动消除效能

  • 【毕业设计】java-springboot+vue个人云盘管理系统实现源码（完整前后端+mysql+说明文档+LunW）.zip

    【毕业设计】java-springboot+vue个人云盘管理系统实现源码（完整前后端+mysql+说明文档+LunW）.zip

Global site tag (gtag.js) - Google Analytics