一千萬個為什麽

搜索

jQuery自動完成動態創建的輸入

我在使用動態創建輸入的jQuery自動完成時遇到了問題(再次使用jQuery創建)。我無法獲得自動完成以綁定到新輸入。

自動填充</強>

      $("#description").autocomplete({
         source: function(request, response) {
            $.ajax({
                url: "../../works_search",
                dataType: "json",
                type: "post",
                data: {
                    maxRows: 15,
                    term: request.term
                },
                success: function(data) {
                    response($.map(data.works, function(item) {
                        return {
                                label: item.description,
                                value: item.description
                        }
                    }))
                }
            })
        },
        minLength: 2,
    });


New table row with inputs

var i = 1;
var $table = $("#works");
var $tableBody = $("tbody",$table);

$('a#add').click(function() {
    var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" id="description" name="item[' + i + '][works_description]" /></td></tr>');
    $tableBody.append(newtr); 
    i++;
});

我知道問題是由於頁面加載後創建的內容,但我無法弄清楚如何解決它。我已經閱讀了幾個相關的問題,並遇到了jQuery live方法,但我仍然在堵塞!

任何建議?

最佳答案

首先,您需要存儲 .autocomplete()的選項,如:

var autocomp_opt={
         source: function(request, response) {
            $.ajax({
                url: "../../works_search",
                dataType: "json",
                type: "post",
                data: {
                    maxRows: 15,
                    term: request.term
                },
                success: function(data) {
                    response($.map(data.works, function(item) {
                        return {
                                label: item.description,
                                value: item.description
                        }
                    }))
                }
            })
        },
        minLength: 2,
    };

使用 class 屬性標記輸入更為簡潔,如:

<input type="text" class="description" name="item[' + i + '][works_description]" />

最後,當您創建新表行時,將 .autocomplete()應用於已存儲在 autocomp_opt 中的選項:

$('a#add').click(function() {
    var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" class="description" name="item[' + i + '][works_description]" /></td></tr>');
    $('.description', newtr).autocomplete(autocomp_opt);
    $tableBody.append(newtr); 
    i++;
});

轉載註明原文: jQuery自動完成動態創建的輸入