记录工作日志
分享优惠信息、实用软件及工具

bootstrap输入提示框typeahead复制问题的解决办法

用bootstrap在做项目时遇到一个问题,bootstrap中有输入自动提示的这样一个组件,这个组件在通过jquery进行克隆复制的时候遇到了一些问题,无论克隆的时候原始输入框是否已经填写了数据,在克隆完后,只要原始输入框填写了数据,新的输入框(克隆出来的)都无法重新从source里获取所有的信息,只能按照原始选定的数据获取。

后来,经过多次试验,解决了这个问题,主要思路是这样的:

1、不用jquery的clone(true)方法克隆,直接用jquery在网页中写出完整html代码。(我项目中用after()方法)例如如下代码:

$("table").on("click","a.zengjia",function(i){
		$(this).parent().parent().after("这里写入包含自动输入提示框的html完整代码结构");
	});	 
html中要包含typeahead结构,例如:<input placeholder='输入关键词并点选' class='typeahead' type='text' data-provide='typeahead' autocomplete='off'/>

 

2、让新的typeahead提示框在获得焦点时绑定事件。例如如下代码:

$('table').on("focus","input.typeahead",function(){
	$(this).typeahead({ source:subjects });
});

subjects对象可以在js脚本中获取,这里我的模板用的是smarty:
var subjects = [{foreach $data as $v=>$k}'{$k.title}',{/foreach}''];

 

赞(0) 打赏一下
未经允许不得转载:飞虫博客 » bootstrap输入提示框typeahead复制问题的解决办法
分享到

评论 抢沙发

觉得文章有用就打赏一下博客作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫