Jquery Autocomplete 不适用于 Ajax 的输入框答案

【问题标题】：Jquery Autocomplete not working with Input Box from AjaxJquery Autocomplete 不适用于 Ajax 的输入框
【发布时间】：2016-10-28 23:33:16
【问题描述】：

我有一个输入框，它通过 ajax 动态添加到页面中，这取决于用户从下拉列表中的选择。

document.getElementById("input_box").innerHTML ="<input id='ProjectName'/>";

问题是 jQuery 的自动完成功能无法与输入框“ProjectName”一起使用。

$(function() {
    $( '#ProjectName' ).autocomplete({
        source: 'data.php'
    });
});

如果我在与 jQuery Autocomplete 相同的 php 中硬编码，它可以完美运行。

请帮忙。

【问题讨论】：

您需要确保autocomplete(...) 仅在您将#ProjectName 元素添加到页面后运行。否则同$('#element-that-doesnt-exists').autocomplete(...)
如果您已经在使用 jquery，请考虑使用$("#input_box").html("<input id='ProjectName'/>"); (:，也正如 Dakel 所说，确保在尝试绑定任何内容之前创建元素

标签： javascript php jquery ajax

【解决方案1】：

这是因为在控件生成之前调用了自动完成功能。请这样尝试

function setInput(){
    document.getElementById("input_box").innerHTML ="<input id='ProjectName'/>";
    $(document).ready(function(){
        $( '#ProjectName' ).autocomplete({
            source: 'data.php'
        });
    })
}<br/>
setInput();

您也可以考虑使用 jquery 设置input。 <pre> $(#input_box).html("< input id='ProjectName'/>")</pre>

【讨论】：

#input_box 缺少引号，并且该函数中的$(document).ready() 没有多大意义

【解决方案2】：

谢谢大家的回复。这真的很有帮助。其实我不太了解Jquery。这就是为什么我不知道如何使用 $(#input_box).html("")。

奇怪的是，它确实通过从输入框中调用 onkeyup 事件来工作，甚至在生成控件之前调用自动完成。

Ajax 在页面上生成输入框。

<input  id='ProjectName' onkeyup='setInput();'/>

我在页面上的 javascript。

<script>
function setInput()
{   
    $(document).ready(function(){
    $( '#ProjectName' ).autocomplete({
    source: 'data.php'
    });
    })
}
</script>";

【讨论】：