附加输入字段上的Jquery自动完成

我使用jqueryautocomplete查询数据库。该函数绑定到类为“completeme_accounts”的所有文本字段。这对于默认文本字段很好，该字段在页面加载时显示。然而，当我通过Jquery添加更多文本字段时，autocomplete对它们不起作用。我在这里检查了几个类似的解决方案，但找不到一个与我的代码兼容的解决方案。我猜我需要使用Jquery.on（因为live已被弃用），但我不知道如何使用。我的代码：

$(document).ready(function(){ 

$(function() {
    function log( message ) {
        $( "<div>" ).text( message ).prependTo( "#log" );
        $( "#log" ).scrollTop( 0 );
    }

    $( ".completeme_accounts" ).autocomplete({
        mustMatch: true,
        source: "accounts_autocomplete.php",
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        },
        change: function (event, ui) {
            if (!ui.item) {
                 $(this).val('');
             }
        }
    });
});

}); // Doc ready

$（文档）.ready（函数（）{
$（函数（）{
功能日志（消息）{
$（“”）.text（message）.prependTo（“#log”）；
$（“#log”）.scrollTop（0）；
}
$（“.completeme_accounts”）.autocomplete({
mustMatch：是的，
来源：“accounts\u autocomplete.php”，
最小长度：2，
选择：功能（事件、用户界面）{
日志（ui.item？
“选定：”+ui.item.value+“aka”+ui.item.id:
“未选择任何内容，输入为”+this.value）；
},
更改：功能（事件、用户界面）{
如果（！ui.item）{
$（this.val（“”）；
}
}
});
});
}); // 医生准备好了吗

带有输入字段的表：

<table id="addaccount">
<tr>
<td><div class="ui-widget"><input name="account[1]" type="text" class="completeme_accounts" id="account1" value=""></div></td>
<td><input type="radio" name="source" id="radio" value="radio" class="required"></td>
</tr>
<tr>
<td colspan="2"><a href="#" id="addrow" onclick="return false;">Add another account</a></td>
</tr>
</table>

<script>
$rowid = 1;
$("#addrow").on("click", function(){
$rowid = $rowid + 1;
$('#addaccount tr:last').before('<tr><td><div class="ui-widget"><input name="account['+$rowid+']" type="text" class="completeme_accounts" id="account'+$rowid+'" value=""></div></td><td><input type="radio" name="payment_source" id="radio" value="radio" class="required"></td></tr>');
});
</script>

附加额外输入字段的脚本：

<table id="addaccount">
<tr>
<td><div class="ui-widget"><input name="account[1]" type="text" class="completeme_accounts" id="account1" value=""></div></td>
<td><input type="radio" name="source" id="radio" value="radio" class="required"></td>
</tr>
<tr>
<td colspan="2"><a href="#" id="addrow" onclick="return false;">Add another account</a></td>
</tr>
</table>

<script>
$rowid = 1;
$("#addrow").on("click", function(){
$rowid = $rowid + 1;
$('#addaccount tr:last').before('<tr><td><div class="ui-widget"><input name="account['+$rowid+']" type="text" class="completeme_accounts" id="account'+$rowid+'" value=""></div></td><td><input type="radio" name="payment_source" id="radio" value="radio" class="required"></td></tr>');
});
</script>

$rowid=1；
$（“#添加行”）。在（“单击”，函数（）{
$rowid=$rowid+1；
$（'#addaccount tr:last'）。在（''）之前；
});

我不确定您在该脚本中到底想做什么，但如果您想更改自动完成的可能值，可以执行以下操作：

---

$（“#标记”）.autocomplete（“选项”、“源”、“值”、“您”、“想要”）

在添加

文本框之前，DOM已加载，因此不会根据添加的输入启动
自动完成

您必须对附加的输入再次启动
自动完成。

将类添加到div
。追加输入

<div class="ui-widget append_input">
  <input name="account['+$rowid+']" type="text" class="completeme_accounts" 
  id="account'+$rowid+'" value="">
</div>

这并不是一个
.on
有帮助的情况，因为没有可触发的事件。您只需让附加新字段的代码在附加后在其上启用自动完成。可能重复@Barmar谢谢，这有助于我理解。在更好一点的情况下。@eicto我以前没有看到该线程！我将尝试用我的代码实现该解决方案。