zoukankan      html  css  js  c++  java
  • 输入框自动补全功能

    在输入框输入信息后,自动提示补全。我选择用typeahead.js,后来发现,原来这个库的相关学习资料很少,搞的稍微有点久,才弄明白点...本文实属原创,如有错误,敬请指教!

    简介:

    官网:http://twitter.github.io/typeahead.js
    github: https://github.com/twitter/typeahead.js
    使用文档:https://www.awesomes.cn/repo/twitter/typeahead-js

    在查资料的过程中,不难发现,typeahead.js一直会跟boostrap扯上关系。实际上在bootstrap 2.x时,自带了补全控件typeahead;但是到了,bootstrap 3.x时,舍弃了这个插件,这是出现了单独插件,名叫bootstrap-3-typeahead,再后面bootstrap-3-typeahead 改名 typeahead.js.

    接口:
    name —— 数据集的名字。
    source —— 规定包含查询时要显示的值的数据源。值的类型是 array,默认值是 [ ]。
    items —— 规定查询时要显示的条目的最大值。数据类型是 number,默认值是 8。
    highlighter —— 用于自动高亮突出显示结果。带有一个单一的参数,即具有 typeahead 实例范围的条目。数据类型是 function。默认情况下是高亮突出显示所有默认的匹配项。
    minLength —— 推荐引擎开始渲染所需要的最小字符。默认为 1 。
    hint —— 默认为 true,会自动补全第一个匹配的元素,设置为 false 时,typeahead 将不会补全 .
    display - 对于推荐对象,决定用何种字符串表示,并将会在某个输入控件选择后使用。其值可以是关键字符串,或者是将推荐对象转换为string的函数。默认为 value.
    $('.typeahead').typeahead('destroy');移除typeahead功能,并将 input 元素的状态重置为原始状态。
    $('.typeahead').typeahead('open');打开typeahead下拉菜单。 
    $('.typeahead').typeahead('close');关闭typeahead的下拉菜单。
    var myVal = $('.typeahead').typeahead('val'); 返回typeahead的当前值,该值为用户输入到 input 元素中的文本
    $('.typeahead').typeahead('val', myVal);设置typeahead的值,要来替代 jQuery#val 函数。

  • 相关阅读:
    22、闭包与继承
    合并两个有序链表
    7. 整数反转
    Linux grep命令
    认识与学习BASH
    微信支付-H5网页支付开通流程
    解决 Qt5 报错 This application failed to start because it could not find or load the Qt platform plugin
    Linux 创建交换分区扩展虚拟内存
    Linux 逻辑卷管理LVM
    Linux的文件权限
  • 原文地址:https://www.cnblogs.com/blog-index/p/6797976.html
Copyright © 2011-2022 走看看