如何将 typeahead.js (Bloodhound) 添加到 jQuery 动态创建的字段?
How do I add typeahead.js (Bloodhound) to jQuery dynamically-created fields?
我可以在静态表单上提前加载 Twitter。但是,在这种情况下,我想将它应用于动态生成的字段。尽管我的复制脚本将所需的“.typeahead”class 添加到新输入中,但它似乎从未起作用。事实上,静态表单被几个额外的 classes 包围,它们不是为动态字段生成的。
我觉得我还需要做一些事情才能使动态字段像静态字段一样运行,但我不确定。
Javascript:
<!-- Dataset: First Names -->
var firstnames = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 5,
prefetch: {
url: './datasets/firstnames.json',
filter: function(list) {
return $.map(list, function(firstname) { return { name: firstname }; });
}
}
});
firstnames.initialize();
$('.typeahead').typeahead(null, {
name: 'firstnames',
displayKey: 'name',
source: firstnames.ttAdapter()
});
<!-- Dataset: First Names (End) -->
<!-- Dynamic Fields -->
var count=2;
$("#add").click(function(){
var html="<div id='div"+count+"'><input id='firstname"+count+"' type='text' class='typeahead' placeholder='Additional First Name'></input><button type='button' onclick=remover('"+count+"')>Remove</button></div>";
$("#additionalnames").append(html);
count++;
});
function remover(which){
$("#div"+which).remove();
}
<!-- Dynamic Fields End -->
HTML:
<p>Standard field works fine (type a letter from a to g):</p>
<input type="text" id="firstname" name="firstname" class="typeahead" placeholder="First Name">
<br /><br /><br /><br /><br /><br />
<p>Dynamic field does not:</p>
<div id="additionalnames"></div>
<button id="add" type="button">Add Another</button>
我不认为 JSFiddle 可以处理我的 json 文件,所以这里有一个实时实现:
http://drjoeseriani.com/firstnames
这里有一个可下载的版本:
http://drjoeseriani.com/firstnames.zip
感谢您的帮助。
使用 javascript 创建元素而不是附加原始标记可能很有用。为什么 ?
因为如果您使用 javascript(或 jQuery)创建元素,您可以将 event/plugins 附加到它,在这种情况下它可以是一个预输入插件。
像这样
var input = $('<input>').attr('id', 'firstname' + count).addClass('typeahead').prop('placeholder', 'Additional First Name');
现在您有了一个输入元素,您可以将 .typehead({ ... })
附加到它。
所以你的点击事件应该是这样的。
$("#add").click(function() {
// creating a new <div id=count></div>
var div = $('<div>').attr('id', count);
// creating a new <input id=count class="typeahead" placeholder=".."></input>
var input = $('<input>').attr('id', 'firstname' + count)
.addClass('typeahead')
.prop('placeholder', 'Additional First Name');
// creating a new <button>Remove</button> (with a click event)
var button = $('<button>').text('Remove')
.on('click', function() {
$(this).closest('div').remove();
});
div.append(input); // appending the input to the div
div.append(button); // appending the button to div
// attaching typeahead to the newly creating input
input.typeahead(null, {
name: 'firstnames',
displayKey: 'name',
source: firstnames.ttAdapter()
});
// appending our newly creating div with all the element inside to #additionalnames
$("#additionalnames").append(div);
// incrementing count
count++;
});
此外,我更改了冒昧将 remover
脚本一起删除。
您可以将点击事件附加到按钮并查找父级 div 并使用 .closest()
将其删除
希望对您有所帮助。
我可以在静态表单上提前加载 Twitter。但是,在这种情况下,我想将它应用于动态生成的字段。尽管我的复制脚本将所需的“.typeahead”class 添加到新输入中,但它似乎从未起作用。事实上,静态表单被几个额外的 classes 包围,它们不是为动态字段生成的。
我觉得我还需要做一些事情才能使动态字段像静态字段一样运行,但我不确定。
Javascript:
<!-- Dataset: First Names -->
var firstnames = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 5,
prefetch: {
url: './datasets/firstnames.json',
filter: function(list) {
return $.map(list, function(firstname) { return { name: firstname }; });
}
}
});
firstnames.initialize();
$('.typeahead').typeahead(null, {
name: 'firstnames',
displayKey: 'name',
source: firstnames.ttAdapter()
});
<!-- Dataset: First Names (End) -->
<!-- Dynamic Fields -->
var count=2;
$("#add").click(function(){
var html="<div id='div"+count+"'><input id='firstname"+count+"' type='text' class='typeahead' placeholder='Additional First Name'></input><button type='button' onclick=remover('"+count+"')>Remove</button></div>";
$("#additionalnames").append(html);
count++;
});
function remover(which){
$("#div"+which).remove();
}
<!-- Dynamic Fields End -->
HTML:
<p>Standard field works fine (type a letter from a to g):</p>
<input type="text" id="firstname" name="firstname" class="typeahead" placeholder="First Name">
<br /><br /><br /><br /><br /><br />
<p>Dynamic field does not:</p>
<div id="additionalnames"></div>
<button id="add" type="button">Add Another</button>
我不认为 JSFiddle 可以处理我的 json 文件,所以这里有一个实时实现: http://drjoeseriani.com/firstnames
这里有一个可下载的版本: http://drjoeseriani.com/firstnames.zip
感谢您的帮助。
使用 javascript 创建元素而不是附加原始标记可能很有用。为什么 ?
因为如果您使用 javascript(或 jQuery)创建元素,您可以将 event/plugins 附加到它,在这种情况下它可以是一个预输入插件。
像这样
var input = $('<input>').attr('id', 'firstname' + count).addClass('typeahead').prop('placeholder', 'Additional First Name');
现在您有了一个输入元素,您可以将 .typehead({ ... })
附加到它。
所以你的点击事件应该是这样的。
$("#add").click(function() {
// creating a new <div id=count></div>
var div = $('<div>').attr('id', count);
// creating a new <input id=count class="typeahead" placeholder=".."></input>
var input = $('<input>').attr('id', 'firstname' + count)
.addClass('typeahead')
.prop('placeholder', 'Additional First Name');
// creating a new <button>Remove</button> (with a click event)
var button = $('<button>').text('Remove')
.on('click', function() {
$(this).closest('div').remove();
});
div.append(input); // appending the input to the div
div.append(button); // appending the button to div
// attaching typeahead to the newly creating input
input.typeahead(null, {
name: 'firstnames',
displayKey: 'name',
source: firstnames.ttAdapter()
});
// appending our newly creating div with all the element inside to #additionalnames
$("#additionalnames").append(div);
// incrementing count
count++;
});
此外,我更改了冒昧将 remover
脚本一起删除。
您可以将点击事件附加到按钮并查找父级 div 并使用 .closest()
希望对您有所帮助。