如何將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()

希望這會有所幫助。