动态创建输入框的jQuery自动完成功能

Question

我在使用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,
    });

新的带有输入框的表格行

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方法，但我仍然卡住了！

有什么建议吗？

- Jamatu

Answer 1

首先，您需要像这样存储 .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，例如:

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

最后，当你创建一个新的表格行时，把已经存储在 autocomp_opt 中的选项应用于 .autocomplete()：

$('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++;
});

- Z. Zlatev

Answer 2

我发现我需要在追加之后加上自动完成：

 $tableBody.append(newtr);  
 $('.description', newtr).autocomplete(autocomp_opt);

- Alex