Автозаполнение не срабатывает при добавлении поля через AJAX

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

Вот как я решил проблему:

Я помещаю поле ввода как скрытое на странице

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

, поэтому при выполнении $ (document) .ready виджет автозаполнения"присоединен" к моему полю ввода "search-tag".

Затем, когда я нажимаю на элемент ".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");
        },
        ....
    });

})

Answer 2

Вам нужно инициализировать автозаполнение jquery-ui с новым набором данных в обратном вызове AJAX:

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

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

Только что сделал что-то очень похожее для другого вопроса:

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