Question

我正在使用jQuery UI Autocomplete调用指向数据库的链接来填充表单下拉列表。这工作正常，但我还有一个函数来向表单添加更多表单字段（具有相同的名称/类），我想将自动完成功能应用于这些。

这是否可行，如何重新调用新表单字段的自动完成功能。

我的javascript代码如下......

var count = 0;

$(function(){

$('input.books').each(function() {
var autoCompelteElement = this;
var formElementName = $(this).attr('name');
var hiddenElementID  = formElementName + '_autocomplete_hidden';
/* change name of orig input */
$(this).attr('name', formElementName + '_autocomplete_label');
/* create new hidden input with name of orig input */
$(this).after("<input type=\"hidden\" name=\"" + formElementName + "\" id=\"" + hiddenElementID + "\" />");
$(this).autocomplete({source:'search.php', minLength: 3,
    select: function(event, ui) {
        var selectedObj = ui.item;
        $(autoCompelteElement).val(selectedObj.label);
        $('#'+hiddenElementID).val(selectedObj.value);
        return false;
    }
});
});


$('p#add_field').click(function(){
        count += 1;
            $('#books').append(
            '<tr>'
            + '<td><input type="text" name="BookName_' + count + '" id="BookName" class="books" /> </td>'
            + '<td><input type="text" name="Length_' + count + '" id="Length_' + count + '" /> </td> '
            + '<td><input type="text" name="ISBN_' + count + '" id="ISBN_' + count + '" /> </td> '
            + '<td><input type="text" name="Year_' + count + '" id="Year_' + count + '" /> </td>'
            + '</tr>'
            + '<strong>Link #' + count + '</strong><br />' );
        });



});

Answer 1

在这些新字段上调用自动填充方法？

var newRow = '<tr>'
        + '<td><input type="text" name="BookName_' + count + '" id="BookName" class="books" /> </td>'
        + '<td><input type="text" name="Length_' + count + '" id="Length_' + count + '" /> </td> '
        + '<td><input type="text" name="ISBN_' + count + '" id="ISBN_' + count + '" /> </td> '
        + '<td><input type="text" name="Year_' + count + '" id="Year_' + count + '" /> </td>'
        + '</tr>';
        //+ '<strong>Link #' + count + '</strong><br />';  <--this line can not be added to a table like this! 
$('#books tbody').append(newRow);
newRow.autocomplete( ..options..);

你不能像那样将强元素行追加到表中。浏览器正在修复它，但这是非常糟糕的做法。如果它在你想要的地方，请将它附加在元素之后。

Answer 2

您可以使用jQuery构建它并同时附加自动完成，而不是使用字符串构建HTML：

$('p#add_field').click(function(){
    count += 1;
    var tr = $(document.createElement('tr'));
    $.forEach(['BookName_', 'Length_', 'ISBN_', 'Year_'], function(key){
        var td = $(document.createElement('td'));
        var input = $(document.createElement('input')).attr('type', 'text')
                                                      .attr('name', key+count)
                                                      .attr('id', key+count)
                                                      .autocomplete(// AUTOCOMPLETE HERE);
        var strong = $(document.createElement('strong')).html('Link #'+count);
        td.append(input, strong, $(document.createElement('br'));
        tr.append(td);
    });
    $('#books').append(tr);
});

这样你就可以使用jQuery函数中包含的document.createElement，这样你就可以链接其余的jQuery方法来构建这些元素，同时附加自动完成，然后只使用append to build元素并根据需要附加它们。

将jquery自动完成添加到页面加载后添加的字段

2 个答案: