Question

在网页（ASP.NET MVC）中，我使用Ajax添加输入字段：

$(document).on('click', '.tag-link', function () {
    var curRow = $(this).closest("tr");
    $.ajax({
        url: $("#GetSearchTagsUrl").data('get-search-tags'),
        type: "GET",
        success: function (result) {
            curRow.after(result);
        },
        error: function (err) {
            alert(err.responseText);
        }
    });
})

Ajax调用返回一个局部视图，其中包含我想用作自动完成字段的输入字段

<input type="text" id="search-tag" />

在此字段上，我想使用jqueryui.autocomplete

$("#search-tag").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: myGetTagsUrl,
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
                var result = [];
                data.forEach((tag) => {
                    result.push({ label: tag.name, value: tag.id });
                });
                response(result);
            },
            error: function (e) {
                console.log(e);
            }
        });
    },
    minLength: 3,
    select: function (event, ui) {
        newtag(ui.item);
    }
});

但是当我开始在输入字段中键入内容时，什么也没发生，似乎$（“ searchy-tag”）选择器没有选择任何内容。

也许这是因为这样的输入字段是通过AJAX添加的？如果这是问题所在，如何解决？

Answer 1

您需要使用AJAX回调中的新数据集初始化jquery-ui自动完成功能：

$("#selector").autocomplete('option', 'source', sourceName)

http://api.jqueryui.com/autocomplete/#option-source

对于另一个SO问题所做的事情非常相似：

https://jsfiddle.net/mukagergely/e9wgd2ru/8/

Answer 2

这是我解决问题的方法：

我将输入字段隐藏在页面上

<input type="hidden" id="search-tag" />

因此，当执行$（document）.ready时，自动完成窗口小部件将“附加”到我的“搜索标签”输入字段中。

然后，当我单击“ .tag-link”元素时，输入字段将移至正确的位置并自动完成。

$(document).on('click', '.tag-link', function () {
   <snip...>
   $.ajax({
        url: $("#GetSearchTagsUrl").data('get-search-tags'),
        type: "GET",
        data: parametri,
        success: function (result) {
            curRow.after(result);
            $("#search-tag").appendTo("#myelement");
            $("#search-tag").attr("type", "text");
        },
        ....
    });

})

自动完成不会在通过AJAX添加的字段上触发

2 个答案: