Пользовательский интерфейс jQuery автозаполняет несколько экземпляров после добавления поля

#jquery #jquery-ui #jquery-ui-autocomplete

#jquery #jquery-пользовательский интерфейс #jquery-ui-автозаполнение

Вопрос:

Я использую плагин автозаполнения пользовательского интерфейса jQuery и динамически добавляю новые поля в форму с помощью append () в jQuery. Проблема в том, что я хотел бы создать вновь добавленное поле и поле автозаполнения, чтобы было более 1 поля автозаполнения, даже с тем же исходным URL. Есть помощь?

Спасибо.

Комментарии:

1. должен ли я что-то настроить в автозаполнении, чтобы сделать его совместимым с несколькими экземплярами?

Ответ №1:

Нравится это?

 var blahBlah = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C  ",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    ];
$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: blahBlah
    });
    $("input#Bar").click(function() {
        var div = $("<div/>").text("Dynamically generated control").insertBefore("div:last");
        var input = $("<input/>").autocomplete({
            source: blahBlah
        }).appendTo(div);
    });
});
  

Демонстрация здесь.

Комментарии:

1. пытался сделать .autocomplete() но ввод не меняется, это по-прежнему простой ввод, а не автозаполнение…

Ответ №2:

После append() функции вы должны вызвать autocomplete() новое поле и указать ему тот же источник, что и исходному полю.

Комментарии:

1. пытался сделать .autocomplete() но ввод не меняется, это по-прежнему простой ввод, а не автозаполнение…

Ответ №3:

Я знаю, что это более старый вопрос, но я столкнулся с той же проблемой и нашел решение. Проблема, которую я обнаружил, заключалась в использовании функции clone jQuery для создания нового ввода. Кажется, что автозаполнение не отображается и не работает. Проблема в этом случае заключается в том, что клон копирует все, включая исходную информацию автозаполнения, которая указывает на автозаполнение входных данных, которые были скопированы.

Чтобы решить эту проблему, я вручную создал клон, затем применил автозаполнение, и он начал работать. На самом деле это всегда работало, но указывало на отображение исходного автозаполнения.

Чтобы вручную создать копию входных данных, я сделал следующее:

 // note origInput = the input we are copying $("#myID")
var myClone = $("<input />")
                .attr("name", origInput.attr("name"))
                .attr("type", origInput.attr("type"))
                .attr("id", mynewid)
                .val("")
                .autocomplete( <your values here> );

myClone.appendTo(<parent where you want it to be>);