输入框自动补全功能

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

时间: 2024-11-08 17:26:19

输入框自动补全功能的相关文章

jquery的输入框自动补全功能+ajax

jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端 内容参考网友文章写成,原博的链接找不到了,但是感谢分享! 效果图: 涉及到ajax请求我这里本地请求不到数据就先放测试代码,在文章的最后会放上ajax代码: 用来测试的代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset

c#TextBox输入框自动提示、自动完成、自动补全功能

功能概览 相关属性 TextBox.AutoCompleteCustomSource 属性 获取或设置当 TextBox.AutoCompleteSource 属性设置为 [CustomSource] 时要使用的自定义 T:System.Collections.Specialized.StringCollection. TextBox.AutoCompleteMode 属性 获取或设置一个选项,该选项控制自动完成应用于 TextBox 的方式. 属性值 类型:System.Windows.For

四十七 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/search-suggesters-completion.html 1.创建搜索自动补全字段suggest 自动补全需要用到一个字段名称为suggest类型为Completion类型的一个字段 所以我们需要用将前面的elasticsearch-dsl操作elasticsearch(搜索引擎)增加sugg

easyui-combobox 实现简单的自动补全功能

前台: Html页面 <input id="clsydw" name="clsydw" class="easyui-combobox" data-options="" /> JS //自动补全功能 $("#clsydw").combobox({ valueField:'syr', textField:'syr', panelWidth:200, panelHeight:'auto', onCha

Eclipse自动补全功能和自动生成作者、日期注释等功能设置

以前想实现添加代码作者信息的东西,但不知道怎样实现,今天终于在网上无意中找到解决办法了 Eclipse自动生成作者.日期注释等功能设置 在使用Eclipse 编写Java代码时,自动生成的注释信息都是按照预先设置好的格式生成的. 修改作者.日期注释格式:打开Windows->Preferences->Java->Code Style->Code Templates,点击右边窗口中的Comments,可以看到有很多选项,我们便可对此注释信息模板进行编辑. 如我们希望在一个Java文件

第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲-用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/search-suggesters-completion.html 创建自动补全字段 自动补全需要用到一个字段名称为suggest类型为Completion类型的一个字段 所以我们需要用

debian下增强bash的自动补全功能

在我们新安装的Debian系统时,发现很多命令都不能自动补全,这是很不方便的,因为每个人的精力都是有限的,不是对每个命令的每一个细节都能完全记住,因此自动补全是一个很实用的功能!对于Debian操作系统,我们可以使用下列方法进行增强命令的自动补全功能! 修改/etc/bash.bashrc文件,将 #if [ -f /etc/bash_completion ]; then # . /etc/bash_completion #fi 前面的#去掉 修改/etc/profile文件,在最后增加一行 s

【Qt编程】自动补全功能

最近写了一个查单词的类似有道词典的软件,里面就有一个自动补全功能(即当你输入一个字母时,就会出现几个候选项).这个自动补全功能十分常见,百度搜索关键词时就会出现.不过它们这些补全功能都是与你输入的进行首字匹配,有时也会不方便.例如,如果我输入一个"好",如果是首字匹配的话会出现下图: 如果是句中匹配的话,则是这种情况: 你可以根据自己的要求进行选择哪一种模式. Qt中自带QCompleter类来实现上面的自动补全功能,读者可以在Qt自带的demo中很容易的学会该类的使用.下面我要讲的是

vim基础学习之自动补全功能

本章我们学习自动补全功能1.自动补全优先从当前的编辑区获得补全列表例如:我们写下如下内容 aaaaa aabbb aaab 当我们再次输入aa,然后我们按下Tab的时候,会弹出一个包含 aaaaa aabbb aaab的列表触发补全模式的条件1.插入模式下 ctrl+p ctrl+n 或者Tab 同时,ctrl+p ctrl+n还能够上下移动选中补全列表项还有其他的补全方法,如下这些方法都是以ctrl + x来启动的,然后跟着你想要的补全样式 1.<c-n>-普通关键字 2.<c-x&g