Bootstrap Typeahead无法与动态输入配合使用

Question

I got and input by default when the page is loaded like this:

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

And the typeahead code I'm using is this

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

This is working fine with my input by default but after I add new elements using append it is not working anymore, how can I make this works with new elements?

And I would like to know how to send with a variable the value that i'm typing in the input because I'm doing this for now in the server side just an example

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

I mean how to send a param like

$query = $_GET['param'];

I hope you can help me, thanks.

UPDATE:

 $('#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

In Javascript, when an element is created, things are not automatically bound to it. You should isolate your typeahead initialization in its own function, and then anytime elements are created, you call it to initialize the new elements. For example:

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');
}

Then when you initialize your page, you would call that to init the initial elements.

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

If you add a new element, you would call it again:

$('#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();