Bootstrap Typeahead不使用动态输入

时间:2016-07-22 16:04:47

标签: php jquery twitter-bootstrap

当页面加载时我默认输入并输入:

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

1 个答案:

答案 0 :(得分: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();