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 函数。

  • 相关阅读:
    spark streaming 入门例子
    ElasticSearch-hadoop saveToEs源码分析
    spark 资源参数调优
    spark 任务运行原理
    spark RDD底层原理
    用实例说明Spark stage划分原理
    Spark任务提交底层原理
    spark shuffle内在原理说明
    iOS 辛格尔顿
    CodeForces 22D Segments 排序水问题
  • 原文地址:https://www.cnblogs.com/blog-index/p/6797976.html
Copyright © 2011-2022 走看看