程序猿
讲互联网的故事

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) 打赏一下

评论 1

  1. #1

    博主的博客很不错,不知道能不能交换友链呢?如果博主有意向的话,可以加我的QQ293459572详谈

    威客圈子4年前 (2015-03-12)回复

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

支付宝扫一扫打赏

微信扫一扫打赏