如何将typeahead.js（Bloodhound）添加到jQuery动态创建的字段？

Question

我可以在静态窗体上加载Twitter typeahead。但是，在这种情况下，我想将其应用于动态生成的字段。即使我的复制脚本在新输入中添加了所需的“.typeahead”类，它似乎也不起作用。事实上，静态窗体被几个额外的类所包围，这些类不是为动态字段生成的。

我觉得我需要做更多的事情才能使动态字段像静态字段一样工作，但我不确定。

的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

感谢您的帮助。

Answer 1

使用javascript创建元素而不是附加原始标记可能很有用。为什么？

因为如果你使用javascript（或jQuery）创建一个元素，你可以附加一个事件/插件，在这种情况下，它可以是一个typeahead插件。

像这样

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()

希望这会有所帮助。