0

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

这可能吗，我怎样才能重新调用新表单字段的自动完成功能。

我的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 />' );
        });



});
4

2 回答 2

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

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

于 2012-10-02T17:01:33.863 回答
0

您可以使用 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 来构建元素并根据需要附加它们。

于 2012-10-02T17:03:18.220 回答