• 输入框自动补全功能


    在输入框输入信息后,自动提示补全。我选择用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 函数。

  • 相关阅读:
    代码转换为html显示
    subprocess实时获取结果和捕获错误
    centos7开放端口和防火墙设置
    Inside The C++ Object Model(一)
    知其所以然(以算法学习为例)
    sql语法
    DLL断点调试
    我的算法学习之路
    算法系列之一
    cocos2d-x游戏引擎核心(3.x)----事件分发机制之事件从(android,ios,desktop)系统传到cocos2dx的过程浅析
  • 原文地址:https://www.cnblogs.com/blog-index/p/6797976.html
Copyright © 2020-2023  润新知