自动完成文本框，以便在MVC中动态添加文本框 [英] Autocomplete textbox for dynamically added textbox in MVC
问题描述
亲爱的朋友们，
我已经编码自动完成动态添加文本框。它只执行第一行。我添加另一行然后自动完成不起作用。请有人帮帮我..
谢谢&问候，
Vivek .R
我尝试过：
脚本：
< script type =text / javascript>
$（document）.ready（function（）{
$（document）.on（click，。classAdd，function（）{// on用于获取动态创建按钮的click事件
var ic = $（'＃ItemCode'）;
var rc = $（'＃RateCode'）;
var iname = $（'＃ItemName'）;
//添加行
var rowCount =（$（'。data-contact-person'）。length + 1） - 1;
var contactdiv = ''
'< input type =textid =ItemNamename =ItemNameclass =form-control/>'+
'< input type =textid =IRateCodename =['+ rowCount +']。IRateCodeclass =form-control/& gt;'+
'< input type =textid =ItemCodename =['+ rowCount +'] .ItemCodeclass =form-control/>' +
'< input type =textid =QtyRequestedname =['+ rowCount +'] .QtyRequestedclass =form-control/>'+
'< button type =buttonid =btnAddclass =btn btn-xs btn-primary classAdd>添加更多< / button>'+
'< button type =buttonid =btnDeleteclass =deleteContact btn btn btn-danger btn-xs>删除< / button>'
'';
$（'＃maintable'）。append（contactdiv）; //将这些控件添加到主表类
// alert（rowCount）;
}）;
$（文件）.on（click，。deleteContact，function（）{
$（this）.closest（tr）。remove（）; //最接近用于删除我拥有控件的'tr'
}）; < br $>
//自动完成
$（＃ItemName）。自动完成（{
source：function（request，response）{
$ .ajax（{
url：/ MatReq / GetData？term =+ request.term，
类型：POST，
dataType：json，
成功：函数（数据）{
if（data.length> 0）{
响应（$ .map（数据，函数（项目）{
return {label：item.ItemName，value：item.ItemName
};
}））
}
else {
回复（[{标签：'未找到结果。'，val：-1}]）;
}
}
}）
}，
select：function（event，ui）{
var itemname = ui.item.value;
if（ui.item.val == -1）{
ic.val（''） ;
rc.val（''）;
iname.val（''）;
返回false;
}
else {
$ .getJSON（'@ Url.Action（GetDetail）'，{itemname：ui .item.value}，function（data）{
if（data）{
$（'＃ItemCode'）。val（data.icode）;
$（'＃RateCode'）。val（data.rcode）;
}
}）;
}
}，
//更改：txtOneChanged，
消息：{
noResults：，结果：
}
}）;
< / script>
查看：
foreach（模型中的var i）
{
@ Html.TextBox（ItemName，null，new {id =ItemName，@ class =form-control，autocomplete =off}）
@ Html.TextBoxFor（a => a [j] .IRateCode，new {id =RateCode，@ class = form-control，autocomplete =off}）
@ Html.TextBoxFor（a => a [j] .ItemCode，new {id =ItemCode，@ class =form-control，autocomplete =off}）@ Html.TextBoxFor（a => a [j] .QtyRequested，new {id =QtyRequested，@ class =form-control，autocomplete =off}）
< button type =buttonid =btnAdd class =btn btn-xs btn-primary classAdd>添加更多< / button>
j ++;
}
Dear Friends,
I have coded for autocomplete to dynamically added textbox. it executes first row only. i add another row then autocomplete didn't works. please anyone help me..
Thanks & regards,
Vivek .R
What I have tried:
Script:
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", ".classAdd", function () { //on is used for getting click event for dynamically created buttons
var ic = $('#ItemCode');
var rc = $('#RateCode');
var iname = $('#ItemName');
//Add rows
var rowCount = ($('.data-contact-person').length + 1) - 1;
var contactdiv = '' +
'<input type="text" id="ItemName" name="ItemName" class="form-control" />' +
'<input type="text" id="IRateCode" name="[' + rowCount + '].IRateCode" class="form-control" />' +
'<input type="text" id="ItemCode" name="[' + rowCount + '].ItemCode" class="form-control " />' +
'<input type="text" id="QtyRequested" name="[' + rowCount + '].QtyRequested" class="form-control" />' +
'<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button>' +
'';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
// alert(rowCount);
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
//Autocomplete
$("#ItemName").autocomplete({
source: function (request, response) {
$.ajax({
url: "/MatReq/GetData?term=" + request.term,
type: "POST",
dataType: "json",
success: function (data) {
if (data.length > 0) {
response($.map(data, function (item) {
return { label: item.ItemName, value: item.ItemName
};
}))
}
else {
response([{ label: 'No results found.', val: -1}]);
}
}
})
},
select: function (event, ui) {
var itemname = ui.item.value;
if (ui.item.val == -1) {
ic.val('');
rc.val('');
iname.val('');
return false;
}
else {
$.getJSON('@Url.Action("GetDetail")', { itemname: ui.item.value }, function (data) {
if (data) {
$('#ItemCode').val(data.icode);
$('#RateCode').val(data.rcode);
}
});
}
},
// change: txtOneChanged,
messages: {
noResults: "", results: ""
}
});
</script>
View:
foreach (var i in Model)
{
@Html.TextBox("ItemName", null, new { id = "ItemName", @class = "form-control", autocomplete = "off" })
@Html.TextBoxFor(a =>a[j].IRateCode, new { id = "RateCode", @class = "form-control", autocomplete = "off" })
@Html.TextBoxFor(a => a[j].ItemCode, new { id = "ItemCode", @class = "form-control", autocomplete = "off" }) @Html.TextBoxFor(a => a[j].QtyRequested, new { id = "QtyRequested", @class = "form-control", autocomplete = "off" })
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
j++;
}
推荐答案
（document）.ready（ function（）{
(document).ready(function () {
（document）.on（click，。classAdd，function（）{// on用于获取动态创建的click事件按钮
var ic =
(document).on("click", ".classAdd", function () { //on is used for getting click event for dynamically created buttons
var ic =
（'＃ItemCode'）;
var rc =
('#ItemCode');
var rc =
这篇关于自动完成文本框，以便在MVC中动态添加文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
