Vivek.anand34 Ответов: 1

Автозаполнение текстового поля для динамически добавляемого текстового поля в MVC

уважаемый друг,

Я закодировал автозаполнение для динамически добавляемого текстового поля. он выполняет только первую строку. я добавляю еще одну строку, после чего автозаполнение не работает. пожалуйста, кто-нибудь, помогите мне..




Спасибо и с уважением,
Вивек. Р

Что я уже пробовал:

Скрипт:
< script type= "text/javascript">
$(документ).готово(функция () {
$(документ).на("клик", ".classAdd", функция () { //используется для получения события click для динамически созданных кнопок
var ic = $('#ItemCode');
var rc = $('#RateCode');
ВАР имя_экземпляра = $('#имя');
// Добавить строки
ВАР количество строк = ($('.данных-контакт-персона').длина + 1) - 1;
var contactdiv =" +
'< input type= "text" id=" ItemName " name=" ItemName "class=" form-control " />' +
в '<тип входного="текст" идентификатор="IRateCode" имя="[' + строк + '].IRateCode "class=" form-control" />' +
в '<тип входного="текст" идентификатор="код" имя="[' + строк + '].Артикул" класс="форма контроля" /&ГТ;' +
в '<тип входного="текст" идентификатор="QtyRequested" имя="[' + строк + '].QtyRequested" класс="форма контроля" /&ГТ;' +
в '<кнопка типа="кнопка" ID="btnAdd" класс="БТН БТН-хз БТН-первичный classAdd"и GT;добавить больше&ЛТ;/кнопку&ГТ;' +
в '<кнопка типа="кнопка" ID="btnDelete" класс="deleteContact БТН БТН БТН-опасность БТН-хз">удалить&ЛТ;/кнопку&ГТ;' +
'';
$('#maintable'). append(contactdiv); / / добавление этих элементов управления в класс Main table
// оповещения(количество строк);
});

$(документ).на("клик", ".deleteContact", функция () {
$(этот).ближайший("тр").удалить(); // ближайший использован для того чтобы извлечь соответствующие 'ТР', в котором у меня есть контроль
});

//Функция автозаполнения

$("#ItemName"). автозаполнение({
источник: функция (запрос, ответ) {
$.Аякс({
url: "/MatReq/GetData?term= " + request. term,
тип: "пост",
тип данных: "json",
успех: функция (данные) {
if (data. length > 0) {
ответ ($. map(data, function (item) {
возвращение { метка: товар.Имя, значение: элемент.Имя
};
}))
}
ещё {
ответ([{ label: 'no results found.', val: -1}]);
}
}
})
},
выберите: функция (событие, пользовательский интерфейс) {
ВАР имя = ИП.товар.значение;
если (ИП.товар.Валь == -1) {
СК.Валь(");
ру.Валь(");
имя_экземпляра.Валь(");
возвращать false;
}
ещё {
$.помощью метода getjson('@URL-адрес.Действий("GetDetail")', { имя: пользовательского интерфейса.товар.значение }, функция (данных) {
если (данные) {
$('#ItemCode'). val(data. icode);
$('#RateCode'). val(data.rcode);
}
});
}
},
// изменение: txtOneChanged,
сообщения: {
noResults: "", результаты: ""
}
});
< / script>

Смотреть:
foreach (var i в модели)
{

@HTML-код.Текстовое поле("Имя", значение null, новый { идентификатор = "наименование", @класс = "форма контроля" автозаполнение = "выкл" })
@HTML-код.TextBoxFor(а =&ГТ;а[Дж].IRateCode, новый { идентификатор = "RateCode", @класс = "форма контроля" автозаполнение = "выкл" })
@Html. TextBoxFor(a => a[j].Артикул, новый { идентификатор = "артикул", @класс = "форма контроля" автозаполнение = "выкл" }) @HTML-код.TextBoxFor(а =&ГТ; а[Дж].QtyRequested, новый { идентификатор = "QtyRequested", @класс = "форма контроля" автозаполнение = "выкл" })

&ЛТ;кнопка типа="кнопка" ID="btnAdd" класс="БТН БТН-хз БТН-первичный classAdd"и GT;добавить больше&ЛТ;/кнопку&ГТ;

Дж++;
}

1 Ответов

Рейтинг:
1

F-ES Sitecore

У вас есть две проблемы, когда ваша страница загружается и

$("#ItemName").autocomplete


запускает, он присоединяется ко всем элементам с идентификатором ItemName. Если вы создадите новый элемент с этим идентификатором, то у него не будет автозаполнения, если вы не сказали ему прикрепить к нему плагин автозаполнения. Каждый раз, когда вы создаете новый элемент, вы также должны прикрепить автозаполнение. Самый простой способ сделать это-превратить ваш код автозаполнения в функцию, и вы вызываете эту функцию при загрузке документа, а также при добавлении новых элементов.

Однако это все равно не сработает:) поскольку идентификатор должен быть уникальным на странице, у вас может быть только один элемент с идентификатором ItemName, если у вас их три, то распознается только первый. Вместо использования идентификаторов вам нужно будет использовать имена классов или использовать атрибуты "данные"для маркировки соответствующих элементов.

Пример;

<div id="target">
@foreach (var m in Model)
{
    <span>Auto</span>@Html.TextBox("ItemName", null, new {data_autocomplete="data-autocomplete"})<br/>
    <span>No auto</span>@Html.TextBox("TestBox")<br/>
}
</div>

<button onclick="return add();">Add</button>

<script type="text/javascript">
    $(document).ready(function () {
        setup();
    });

    function add() {
        var txt = $("<input type='text'></input>").attr("data-autocomplete", "data-autocomplete");
        $("#target").append(txt);
        setup();
        return false;
    }
    function setup() {
        $("[data-autocomplete]").autocomplete({ source: ["Apple", "April", "Blue", "Brown"] });
    }
</script>

Vivek.anand34

На самом деле, $("#ItemName") - это " Id " или "name".. Его идентификатор означает, что все идентификаторы в текстовом поле одинаковы справа.

F-ES Sitecore

Нет, "#ItemName " означает идентификатор ItemName. "[name=ItemName] " означает что-то с именем ItemName.

Vivek.anand34

я поставил уникальный идентификатор ("ItemName[0], ItemName[1]...), но теперь 1-я строка тоже не работала..

F-ES Sitecore

Это просто приведет к беспорядку, не используйте для этого идентификаторы, используйте имена классов или атрибуты данных.

Vivek.anand34

1-я строка-это текстовое поле, подобное этому @Html. TextBox("[0].ItemName", null, new { @class = "form-control", autocomplete = " off" })

из 2-го ряда так: на <тип входного="текст" идентификатор="[' + строк + '].Наименование" имя="[' + строк + '].Наименование" класс="форма контроля" /&ГТ;

любая проблема в этом.

Vivek.anand34

я тоже пользовался классом. но его тоже выполняют только 1-й ряд

F-ES Sitecore

Я обновил свое решение с помощью некоторого примера кода

Vivek.anand34

Нет, его тоже первый ряд только исполняют.

Vivek.anand34

c приведенным выше кодом скрипта" добавить строку". любая функция автозаполнения может добавить в это.

F-ES Sitecore

Вы должны повторно запустить бит "автозаполнения" кода после добавления новых элементов, как я уже сказал. Ты это делаешь? Я снова обновил свое решение.

Vivek.anand34

функция удаления строки работает во всех строках.. но этот автозаполнитель не работает.

Vivek.anand34

Я поставил функцию вот так:
var setupAutoComplete = функция () {
// Код автозаполнения
}

я даю setupAutocomplete (); из 2-го ряда его работы.. Теперь первый ряд не работал.
как поместить этот fn в загрузку страницы. теперь я дал кнопке событие, так что со 2-го ряда она работает.

Vivek.anand34

спасибо тебе ... я переоделся на это.
$(документ).готово(функция () {
setupAutoComplete();
});
автозаполнение теперь работает.. но выбранное значение изменено-это изменение значений первой строки...