Bootstrap Typeahead無法與動態輸入配合使用

Question

默認情況下，頁面加載時我得到並輸入：

<input type="text" class="form-control input-sm productName" id="" placeholder="Search..." />

我正在使用的預輸入代碼是這樣的

$.get('../search_product.php', function(data){
    $(".productName").typeahead({ source: data });
},'json');

默認情況下，這對於我的輸入工作正常，但是在使用append添加新元素后，它不再起作用了，如何使它與新元素一起工作？

我想知道如何使用變量發送我在輸入中輸入的值，因為我現在在服務器端只是一個例子

echo json_encode(array('hi', 'hi 2', 'hi 3', 'hi 4'));

我的意思是如何發送像

$query = $_GET['param'];

希望您能幫助我，謝謝。

更新：

 $('#containerProducts').append('<div class="row m-t-5">' +
                                        '<div class="col-sm-offset-2 col-sm-4"><input type="text" class="form-control input-sm productName" id="" placeholder="Search..." /></div>' +
                                '</div>'
                            );

Answer 1

在Javascript中，創建元素時，事物不會自動綁定到該元素。 您應該在自己的函數中隔離可提前輸入的初始化，然后在任何時候創建元素時，都調用它來初始化新元素。 例如：

function initTypeahead() {
    // Should probably add code here to only grab elements that are not already initialized
    var elements = $('.productName');
    $.get('../search_product.php', function(data){
        $(elements).typeahead({ source: data });
    }, 'json');
}

然后，當您初始化頁面時，您將調用它來初始化初始元素。

$(document).ready(function() {
    initTypeahead();
});

如果添加新元素，則將再次調用它：

$('#containerProducts').append('<div class="row m-t-5">' +
    '<div class="col-sm-offset-2 col-sm-4"><input type="text" class="form-control input-sm productName" id="" placeholder="Search..." /></div>' +
    '</div>'
);
initTypeahead();