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

【问题标题】：Jquery autocomplete on appended input fieldsJquery在附加的输入字段上自动完成
【发布时间】：2013-01-28 22:46:48
【问题描述】：

我使用 Jquery 自动完成来查询数据库。该函数绑定到具有“completeme_accounts”类的所有文本字段。这适用于页面加载时出现的默认文本字段。但是，当我通过 Jquery 添加更多文本字段时，自动完成对它们不起作用。我在这里检查了几个类似的解决方案，但找不到适用于我的代码的解决方案。我猜我需要使用 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

带有输入字段的表格：

<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>

【问题讨论】：

这并不是真正需要.on 提供帮助的情况，因为没有可触发的事件。您只需要让添加新字段的代码在添加后启用自动完成。
Autocomplete on appended field in JQuery 的可能重复项
@Barmar 谢谢，这有助于我更好地理解 .on。
@eicto 我之前没看到那个帖子！我将尝试用我的代码实现该解决方案。

标签： jquery autocomplete append bind

【解决方案1】：

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

$( "#tags" ).autocomplete( "option", "source",["the", "values", "you", "want"]);

【讨论】：

【解决方案2】：

在您append 文本框之前，DOM 已加载，因此autocomplete 未在附加输入上启动。

您必须在附加输入上再次启动 autocomplete。
给 div 添加一个类 .append_input

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

再次启动自动完成

var appendInput = $(this).closest('#addaccount').find('.append_input').children('.completeme_accounts');
appendInput.autocomplete(yourcode);

See this answer

【讨论】：