bootstrap自动补全插件

基于Bootstrap的Typeahead自动补全插件 配置参数可以通过data-*属性来设置,也可以在初始化是通过js来设置。需要注意的是,使用data-*属性来设置时,需要将驼峰格式的属性转换为连字符形式,例如,data-minLength需要写成data-min-length。Bootstrap-Typeahead用于完成自动补全的数据源有两种方式:通过source属性来设置数据源,或者通过json数据来提供数据源。Bootstrap-Typeahead的使用方式有两种:通过数据属性字段的方式和通过Javascript加载的方式。 阅读详情
在输入框输入关键字,下方显示联想的数据
只需要关心后台传的是List
	$("#create-customerName").typeahead({
			source: function (query, process) {
				$.get(
					"workbench/transaction/getCustomerName.do", 
					{ "name" : query }, 
					function (data) {
						//alert(data);
						process(data);
					},
					"json"
				);
			},
			delay: 1500
		});
		
			注意:
			(1)后台查客户名字即可List<String>
			(2)将浏览器默认提示关闭autocomplete="off"
			

输入框自动联想提示 插件使用配置(config)还是很灵活的,当然也是弊端,配置不当,效果就没了。 使用时候,重要的参数如下(此demo参数配置点击右键看源码): url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1', queryName: 'q', //url?queryName=value,默认为输入框的name属性 jsonp: 'callback', //设置此参数名,将开启jsonp跨域功能(我要调淘宝数据,非跨域不可,淘宝的回调参数名就是callback),否则使用json数据结构 item: 'li', //下拉提示项目单位的选择器,默认一个li是一条提示,与processData写法相关。 processData: function(data){ }//自定义处理返回的数据,该方法可以return一个html字符串或jquery对象,将被写入到提示的下拉层中。 右键查看源码,将看到本demo所编写的processData函数是怎样的,所以这个参数是把如何表现交给你来做了,但别忘了配合 item 参数 getCurrItemValue: function($currItem){ }//定义如何去取得当前提示项目的值并返回值,插件根据此函数获取当前提示项目的值,并填入input中,此方法应根据processData参数来定义。 是的,如果你自定义了processData,这个参数恐怕也需要自定义,默认是获取$currItem.html(),你也可以return $currItem.attr('an attrName'); 右键查看源码,将看到本demo所编写的getCurrItemValue函数是怎样的 textchange: function($input){}, //不同于change事件在失去焦点触发,inchange依赖本插件,只要内容有变化,就会触发,并传入input对象 onselect: function($currItem){} //当选择了下拉的当前项目时执行,并传入当前项目。比如选择了某个提示项目,就提交表单。 sequential: 0, //按着方向键不动是否可以持续选择,默认不可以,设置值可以是任何等价的boolean 立即下载

相关推荐

BootStrap-autocomplete模糊匹配,自动填充

BootStrap的一个插件,使用自动完成功能,用户可以快速查找并选择预先填充的值列表,并利用搜索和过滤。

pycharm使用bootstrap组件方法

ok,最近一直在用的编辑器是pycharm2019.1的 体验感还是就是那样 有个地方是pycharm将一些插件已经封装成第三方库了 这个bootstrop插件好像在新版找不到了 今天给大家带来使用方法 安装插件 pip install django-bootstrap3 在项目settings.py上的INSTALLED_APPS中加入 'bootstrap3,' 在模版中,加载b...

weixin_30443895的博客 3279

BootStrap 智能表单实战系列(十)自动完成组件的支持

web开发中,肯定遇到像百度、google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1、包含像google、百度等类似的简单搜索 2、复杂结构的支持,比如说 输入产品编号,需要将产品的编号、产品的名称、产品的单价、产品的备注信息等填写会表单中的某个位置 代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-autocomplete.html): 自动完成 note:需要引入js文件:jquery-ui.js、jquery.fn.extend.j

Bootstrap tagsinput自定义标签插件

该自定义标签插件提供api接口,可以将input和select元素转换为标签。使用元素作为标签时,需要添加multiple data-role="tagsinput"属性。使用作为标签时,只需要添加data-role="tagsinput"属性即可。itemAddedOnInit:在初始化时,预加载的标签会触发该事件。beforeItemRemove:在删除一个标签之前会触发该事件。beforeItemAdd:在添加一个标签之前会触发该事件。itemAdded:添加一个标签时会触发该事件。

hellogril前端库 1283

使用Bootstrap typeahead插件实现搜索框自动补全的方法

这就是贴代码的坏处之一:搜索框快被网友玩儿坏了!!!有故意输入空格的,有输入or 1=1的,有alert的,有html乱入的…….而且好像还在玩儿,随他们去吧,只要开心就好。 在项目中,经常会用到输入框的自动补全功能,就像百度、淘宝等搜索框一样:当用户输入首字母、关键词时,后台会迅速将与此相关的条目返回并显示到前台,以便用户选择,提升用户体验。当然本项目的补全功能和这些大厂的技术是没有可比性的,但用于站内搜索也是绰绰有余了。 接触到的自动补全插件主要有两个:autocomplete和typeahead。本站使用的是typeahead. jQueryUI-Autocomplete 自动补全插

使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法

主要介绍了使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

5.7 Bootstrap 提示工具(Tooltip)插件

提示工具(Tooltip)插件是受 Jason Frame 写的jQuery.tipsy 的启发。注意:提示工具(Tooltip)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。下面的实例演示了通过 data 属性使用提示工具(Tooltip)插件的用法。下面的实例演示了提示工具(Tooltip)插件方法的用法。下面的实例演示了提示工具(Tooltip)插件事件的用法。

梁辰兴的博客 1072

Cadence仿真实战:从零构建高精度带隙基准电压源

本文是一份详细的Cadence仿真实战指南,指导读者从零开始构建高精度带隙基准电压源。文章首先解释了带隙基准电压源稳定输出电压的原理,然后逐步演示了在Cadence Virtuoso环境中如何搭建测试电路、测量关键温度系数、计算并搭建核心电路,并通过参数扫描和迭代调优来驯服温度漂移,最终实现低漂移的基准电压输出。

weixin_29207533的博客 243

【亲测免费】 Bootstrap Tags - 带有自动完成功能的Bootstrap标签输入组件

Bootstrap Tags - 带有自动完成功能的Bootstrap标签输入组件 是一个基于Bootstrap框架的标签输入组件,它提供了一个美观且易用的方式来创建和管理自定义标签。该组件适合用于各种Web应用程序,包括博客、社交网络、电子商务网站等。 功能和用途 Bootstrap Tags 提供以下功能: 自动完成:支持在输入时提供相关建议,帮助用户快速选择合适的标签。 可定制化:可以根据...

gitblog_00033的博客 589

新手必看:四旋翼无人机PID调参实战指南(附常见问题排查)

本文为四旋翼无人机新手提供PID调参实战指南,详细解析Kp、Ki、Kd参数的实际意义及调参技巧,包含常见问题排查方法。通过系统化的调参流程和实用参考表,帮助用户快速掌握无人机飞行控制核心技能,避免常见错误,提升飞行稳定性与响应性能。

k0l1m2n3o的博客 601

STM32控制气泵和电磁阀实现

2、mos管的选型:mos管选择主要注意两个参数即可,一是导通的电流,二是耐压值,并且常用NMOS管,根据要求,气泵和电磁阀供电电压为12V,所以选择的mos管耐压值要大于12V,这里选用耐压值为30V的MOS管,并且导通电流为5.8A,如下图。1、气泵和电磁阀的开和关均为开关量,实现控制方法有多种,比如继电器,但是继电器动作有噪声且体积较大,更好的方法为使用mos管。使用STM32控制气泵和电磁阀的开和关,气泵和电磁阀的供电电压为12V。最终实现单片机控制气泵和电磁阀的开和关。

jacklood的博客 1万+

Bootstrap5-Autocomplete 组件中的 Tab 键自动完成功能实现

Bootstrap5-Autocomplete 组件中的 Tab 键自动完成功能实现 在 Web 开发中,自动完成(Autocomplete)功能是提升用户体验的重要组件之一。Bootstrap5-Autocomplete 作为一个流行的前端自动完成库,近期对其键盘交互行为进行了重要增强,特别是针对 Tab 键的支持。 功能背景 传统的自动完成组件通常只支持通过 Enter 键来确认选择,而许多现...

gitblog_07559的博客 388

32、通用处理器通信平台发展与5G开源社区技术解析

本文探讨了基于通用处理器(GPP)的通信平台在5G技术中的发展现状与挑战,详细介绍了多个开源平台和硬件架构,并分析了软件加速方法和未来发展方向。文章指出,尽管GPP具有灵活性和开放性优势,但在实时信号处理和功耗等方面仍存在瓶颈,需要通过核心技术研发、标准化协作和应用拓展推动5G技术的实际应用。

orange的博客 129

bootstrap3-typeahead自动补全插件

github:https://github.com/bassjobsen/Bootstrap-3-Typeahead 简介 是Bootstrap-3-Typeahead,不是Twitter open source的typeahead,两者用法有差异。外加如果配合原生的Bootstrap3的话推荐还是用这个。 通过上面的github下载bootstrap3-typeahead.min.js文件...

OceanSky的专栏 1642

Open3D 机载点云电力线提取【2025最新版】

传统方法实现的机载点云电力线分割提取。博客长期更新,本文最新更新时间为:2025年3月23日。

点云侠的博客 4468

HTML5+CSS3+JS小实例:扇形展开折叠菜单

你肯定见过那种圆形浮动按钮(FAB),点一下弹出几个选项。大部分实现就是菜单项从底下往上"弹"出来,排成一列——能用,但没啥记忆点。后来我看到 Path 那个经典的扇形菜单,点一下,五个按钮像花瓣一样从中心散开,每个带不同的延迟和弹性曲线。当时就觉得:这才对嘛,交互就该有点"戏剧性"。今天拆一个纯手写版本,HTML + CSS + JS,不依赖任何库。六菜单项、扇形 144° 展开、弹性过渡、点击关闭、键盘可达——该有的都有。

艾恩小灰灰的博客 164

Bootstrap typeahead自动补全插件的坑

自动补全返回的字段必须叫name; name字段不能包含null,否则自动补全失效

qq_42682745的博客 736

6.8 点云相关软件——CoProcess

摘要 CoProcess是华测导航研发的三维点云全流程处理平台,支持海量数据浏览、编辑及多类型成果输出,适配地形测绘、道路建设等行业需求。软件采用模块化设计,包含基础功能(数据导入、分类、建模等)和行业定制模块(地形、道路、矿山等),支持多格式数据交互与自动化处理,显著提升作业效率。相比Lidar360,CoProcess操作更简便、性价比更高;相比开源工具CloudCompare,其行业适配性与专业功能更优。2025版本优化了数据处理性能与智能算法,需授权激活高级功能,适合商业项目应用。

qq625924821的博客 248

typeahead有什么作用_Bootstrap 自动补全插件 typeahead 使用详解

这篇文章记录了我在使用typeahead的一些问题,不是很全,但是基本够用。Bootstrap提供typeahead组件来完成自动补全功能。两种用法:直接给标签添加属性通过设置autocomplete="off"来关闭浏览器自带的自动补全功能,以防跟我们的产生冲突。通过JavaScript调用$('.typeahead').typeahead()typeahead()详解参考官方README和其他...

weixin_28684655的博客 1188

【数据集】2019年中国1km格网河网密度数据集

中国1km格网河网密度数据集

WW、forever的博客 1346

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

bootstrap3-typeahead文字自动补全插件

一、需求 项目中实现在类似百度搜索功能,在搜索框内输入文字,搜索框下方会出现自动匹配的内容列表,点击某一个,进行查询操作。 二、使用bootstrap3-typeahead自动补全插件实现 bootstrap3的js中没有集成此插件,需要单独引入bootstrap3-typeahead.js /* ============================================================= * bootstrap3-typeahead.js v4.0.2 *

yb305 738

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

使用bootstrap typeahead插件完成自动补全

项目中需要输入框自动补全,搜索测试没少走弯路,终于成功,记录下来,共同学习,希望大家少进坑. 1.依次引入jQuery、bootstrap、typeahead依赖包。 2.创建容器,指定要实现自动补全的位置 3.使用typeahead函数,给参数赋值typeaheadjar包的下载地址:https://github.com/bassjobsen/Bootstrap-3-Typeahead/(使用环境:Bootstrap v4.3.1,Jquery v3.5.1,typeahead v4.0.2,Net:6.

pony1688的博客 752

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

【亲测免费】 开源项目推荐:Bootstrap Autocomplete,打造高效表单输入体验

开源项目推荐:Bootstrap Autocomplete,打造高效表单输入体验 项目介绍 Bootstrap Autocomplete 是一个为Bootstrap框架量身定制的自动补全插件。它适用于Bootstrap 4.x和3.x版本,致力于将普通的input和select字段转变为拥有智能提示功能的输入框,极大提升了用户体验和表单填写效率。通过这个插件,开发者可以轻松地在网页表单中集成高效...

gitblog_00787的博客 970

自动补全插件

input type="text" class="form-control" id="create-accountName" placeholder="支持自动补全,输入客户不存在则新建">//前端只要打了@ResponseBody,返回集合,自动转换成json对象,这个data就是返回的list集合。* 用户在这里输入关键字,键盘弹起之后,source方法触发,执行里面的代码,去查询所有带有关键字的数据。用户输入几个字,自动补全出所有符合条件的内容,列在下面,用户就可以选择一条。//客户名字补全插件。

guanzhu0510的博客 864

bootstrap3-typeahead 自动补全

之前做的自动补全是用的jquery的autocomplete,今天发现一个很酷的自动补全插件!    很酷的一个自动补全插件 http://twitter.github.io/typeahead.js   在bootstrap中使用typeahead插件,完成自动补全   数据源: Local:数组 prefectch:json remote等方式     &lt;!...

一名菜鸟攻城师 359

使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。

示例代码: <input type="text" id="addr"/> <input type="text" hidden id="lat"/> <input type="text" hidden id="lon"/> API:http://wiki.openstreetmap.org/wiki/No...

weixin_34357962的博客 257
上一篇: SpringMVC 的 POST 提交表单出现 405
下一篇: JQ change事件
Pancras_gc
博客等级 码龄10年 2粉丝 37原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值