Autocomplete + динамическое добавление инпутов

@Damatik · Регистрация: 08.11.2015

Студворк — интернет-сервис помощи студентам

Помогите разобраться!
Есть инпут:

HTML5
1
 <input id="attributes" type="text" placeholder="Характеристика товара" />

Он с помощью JQuery автокомплитится...

JavaScript
1
2
3
4
5
6
$(document).ready(function(){
        $("#attributes").autocomplete({
             source: "attributes.php",
             minLength: 2
                });
            });

Встала задача добавлять по нажатию пользователя на кнопку "добавить"

HTML5
1
<input id="add_attr" type="button" value="Добавить" />

такой же инпут:

JavaScript
1
2
3
4
5
6
7
$(document).ready(function(){
         var i=0;
         $("#add_attr").click(function(){
            i++;             
            $(".attr_ums").after('<input id="attributes' + i + '" type="text" placeholder="Характеристика товара" />');
        });
     });

То есть - при первом нажатии добавляется инпут с id=attributes1, при втором id=attributes2 и т.д.
Проблема: перестает отрабатывать автокомплит. На всех добавленных инпутах кроме первого, который изначально на странице был. Я так понимаю - браузер просто не видит те инпуты, которые подгрузились после нажатия пользователем кнопки "добавить" и скрипт автокомплита тупо не отрабатывает...

Как победить?

Добавлено через 8 минут
Забыл упомянуть, что код автокомплита

JavaScript
1
2
3
4
5
6
$(document).ready(function(){
        $("#attributes").autocomplete({
             source: "attributes.php",
             minLength: 2
                });
            });

я меняю, разумеется (т.к. id инпутов динамически меняется) на следующий:

JavaScript
1
2
3
4
5
6
$(document).ready(function(){
        $("#attributes[]").autocomplete({
             source: "attributes.php",
             minLength: 2
                });
            });

Т.е. делаю из id attributes массив. И тогда перестает работать автокомплит и в первом инпуте )

@n0n4m3r · 07.12.2015, 11:31

JavaScript
1
$(document).ready...

означает, что код будет выполнен ПОСЛЕ ТОГО, КАК ЗАГРУЗИТСЯ СТРАНИЦА один раз и всё. Вам нужен обработчик, который будет добавлять автокомплит к каждой новой форме.

@Damatik · 07.12.2015, 21:59 **[ТС]**

Спасибо,n0n4m3r, а в какую сторону глядеть? То есть автокомплит от JQuery вообще тут не подойдет или просто его ковырнуть нужно?

Добавлено через 7 минут
Или просто убрать $(document).ready? )

Добавлено через 3 часа 4 минуты
Заработало, но код выглядит страшно!

JavaScript
1
2
3
4
5
6
7
$(document).ready(function(){
         var i=0;
         $("#add_attr").click(function(){
            i++;             
            $(".attr_ums").after('<input id="attributes' + i + '" type="text" placeholder="Характеристика товара" /><script type="text/javascript">$("#attributes' + i + '").autocomplete({source: "attributes.php?type=attr",minLength: 2});');
        });
     });

Инпуты добавляются с id, который при каждом добавлении увеличивается на +1.
Также в текст того, что нужно добавить воткнул

JavaScript
1
<script type="text/javascript">$("#attributes' + i + '").autocomplete({source: "attributes.php?type=attr",minLength: 2});

Все работает... Но код (((
Можно это как-то причесать?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .