typeahead控件可以用于自动完成这个功能,在jQuery的UI中也有自动完成的控件。以前都是用jQuery UI中的自动完成的控件,但这次想用个轻量级的自动完成的控件,因此就调查了一下typehead控件。

typeahead控件原先是集成在bootstrap2.x框架中的,在bootstrap3.x框架中把typehead独立出来了,托管在github中:http://twitter.github.io/typeahead.js/

我们想要使用的功能其实相对比较简单,如图:

稍微跟普通自动完成有点差异的,就是当用户点击这个类别时,默认情况下如果啥也没输,则自动会提示几个最常用的类别,有点类似下拉框的功能。当然,如果用户输入了某几个字,则自动完成的功能也会体现出来。

在jQuery的autocomplete控件中,这个功能主要通过minChars=0这个属性来实现,在typeahead的例子中没有找到类似的用法,但在论坛中发现有如下的参数:

$('#search').typeahead({

minLength: 2,

//...

});

不过在其中提到,这个功能在v0.10.0版本中有,但目前官方版本为0.9.3。在下载了最新的版本后,测试了一下,没有达到我们期望的效果,同时发现它对于bootstrap3的样式有点乱:

样式需要做调整,同时功能上也没找到我们期望的效果,这样也就放弃使用typeahead控件,还是用原先的jquery autocomplete控件。

但是,从基本用法上,跟jquery autocomplete比较起来,typeahead具有如下的优点:

  1. 体积小,轻便
  2. 用法简单

当然,目前的缺点也比较明显:

  1. 不大成熟;
  2. 功能上不如jquery autocomplete齐全

twitter typeahead控件使用经历的更多相关文章

  1. bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件

    bootstrap-datetimepicker是一个基于twitter bootstrap的简单日期/时间选择控件. <!DOCTYPE HTML> <html> <h ...

  2. 学习懈怠的时候,可以运行Qt自带的Demo,或者Delphi控件自带的Demo,或者Cantu书带的源码,运行一下Boost的例子(搞C++不学习Boost/Poco/Folly绝对是一大损失,有需要使用库要第一时间想到)(在六大的痛苦经历说明,我的理论性确实不强,更适合做实践)

    这样学还不用动脑子,而且熟悉控件也需要时间,而且慢慢就找到感觉了,就可以精神抖擞的恢复斗志干活了.或者Cantu书带的源码. 并且可以使用Mac SSD运行Qt的Demo,这样运行速度快一点. 此外, ...

  3. javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库

    预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...

  4. Win10 UWP开发系列——开源控件库:UWPCommunityToolkit

    在开发应用的过程中,不可避免的会使用第三方类库.之前用过一个WinRTXamlToolkit.UWP,现在微软官方发布了一个新的开源控件库—— UWPCommunityToolkit 项目代码托管在G ...

  5. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

  6. ExtJs控件属性配置详细

    序言:    1.本文摘自网络,看控件命名像是4.0以前的版本,但控件属性配置仍然可以借鉴(不足之处,以后项目用到时再续完善). Ext.form.TimeField: 配置项:            ...

  7. JS组件系列——Bootstrap 树控件使用经验分享

    前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...

  8. UI--普通控件总结1--控件使用

    本文目录 0.UIView常用的属性和操作 0_1.UIView常见的属性 0_2.UIView状态 0_3.UIView常用的方法 1.文本框UITextField和文本视图UITextView 1 ...

  9. jQuery学习笔记(控件位置定位、尺寸大小的获取等)

    想做一个幽灵按钮出来,效果大概如下图: 当点击按钮的时候,会有四根线条从四个方向飞入,经历从“无-有-无”的闪入过程. 那么我的设计想法是,先在HTML中定义一个按钮,然后在jQuery中设计按钮点击 ...

随机推荐

  1. centos 6 不能上网

    今天安装了一个CentOS 6,默认安装的Centos不不能上网? 解决办法:Centos 默认的链接网路的方式为:NAT方式.如果无法上网,设置Network Connection 的方式为Brid ...

  2. thymeleaf:访问list,map等

    1.map 在后端放入一个map Map<String, String> mapDict = serviceBaseDict.selectMap(ConstantDictType.SYSI ...

  3. Jquery简单使用

    展示:$("#id").show(); 隐藏:$("#id").hide();

  4. 锤子科技"临死前"被"接盘" ,内部人士爆料已改签今日头条母公司

    就在昨天,据据锤子科技内部人士透露,部分锤子科技员工在昨天已经接到了相关的临时通知,要求改签劳动合同至今日头条的母公司——字节跳动.至于这是锤子科技真正再度复活还是借尸还魂都不重要,重要的是,作为忠实 ...

  5. Confluence 6 XML 备份失败的问题解决

    XML 站点备份仅仅被用于整合到一个新的数据库.设置一个测试服务器 或者 创建一个可用的备份策略 相对 XML 备份来说是更合适的策略. 相关页面: Enabling detailed SQL log ...

  6. Confluence 6 MySQL 数据库设置准备

    请查看 Supported Platforms 页面来获得 Confluence 系统支持的 MySQL 数据库版本.你需要在安装 Confluence 之前升级你的 MySQL 数据库. 如果你从其 ...

  7. Confluence 6 升级自定义的站点和空间布局

    随着 Confluence 的演变.默认的站点和空间布局也会随着 Confluence 升级而让使用的所有页面进行改变.随着一些新功能的加入和一些老功能的修改,默认的布局也需要进行修改来支持这些改变. ...

  8. python之线程同步

    lock与rlock 使用lock不能连续两次获取锁,获取锁必须先释放锁.但是在一个线程中调用另一个函数时,在该函数中要继续操作共享的数据,这时获取锁就相当于连续执行两次获取锁,所以lock就不适用该 ...

  9. 《剑指offer》从尾到头打印链表

    本题来自<剑指offer> 从尾到头打印链表 题目: 输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 思路: 方案一:首先遍历到尾部,然后从尾部进行到头值进行操作,后进先 ...

  10. git 注意事项

    1,用户凭证 github的两种url地址 http      ssh :由于Git和Github交互操作可能会很频繁,那么一定少了用户授权的操作,为了防止每次操作重复输入用户名和密码,Git提供了两 ...