autocomplete를 위해 jQuery를 사용하여 동적 컨트롤을 등록하십시오
-
06-07-2019 - |
문제
버튼 클릭에서 jQuery를 사용하여 텍스트 상자를 동적으로 만들고 있습니다.
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="lblCustName">
</div>
</td>
<td>
<div id="lblRemove">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Add" id="AddRow" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit" id="SaveCustomers" />
</td>
</tr>
</table>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
//validate post form
$("#CustomersForm").validate({ ignore: ":not(:visible)" });
//Initialize the dynamic id
_DynId = 1;
//Click Event for Customers
$('#AddRow').click(function(e) {
$('#lblCustName').append('<div id="lblCustName' + _DynId + '" style="height:20px;padding-left:10px;">' + '<input type="text" name="CustName" id="CustName' + _DynId + '" class="required" value="" title="*" />');
$('#lblRemove').append('<div id="lblRemove' + _DynId + '" style="height:20px;padding-left:10px;">' + '<img src="../../Content/Images/delete_icon.gif" onclick=Remove("' + _DynId + '"); title="Remove" id="iRemove' + _DynId + '"></img>');
_DynId += 1;
});
</script>
고객을 위해 텍스트 상자를 동적으로 추가하려고합니다. 이것은 보고서 처리를 위해 고객을 추가하는 기능을위한 샘플 HTML입니다. 텍스트 상자에 대한 자동 완성 옵션을 제공해야합니다.
아래 스크립트를 사용했습니다.
$.getJSON("/User/GetAllCustomers/?t=" + new Date(), {},
function(data) {
if (data != null) {
$("input:text[name=CustName]").autocomplete(data, { mustMatch: false, matchContains: 4, max: 50,
formatItem: function(row) {
if (row.CustomerName!= "") {
return row.CustomerName;
}
},
formatResult: function(row) {
return row.CustomerName;
}
}).result(function(e, row) {
//do something
});
}
});
자가 완성은 동적으로 추가 된 컨트롤을 위해 작동하지 않습니다.
동적으로 추가 된 컨트롤을 양식에 등록 할 가능성이 있으므로 동적으로 추가 된 컨트롤에 자동 완성이 작동하도록합니다.
해결책
문제는 자동 완성을 바인딩 할 때 함수가 실행될 때 선택기와 일치하는 필드에 바인딩된다는 것입니다. 나중에 일치하는 무언가를 추가하면 자동으로 바인딩되지 않습니다.
기본적인 jQuery 이벤트의 경우 a가 있습니다 살다 이를 자동으로 수행 할 수있는 바인딩이지만 AutoComplete는이를 통해 작동하지 않습니다. 기본적으로 유일한 선택은 새 텍스트 필드를 추가 할 때마다 새 자동 완성을 바인딩하는 것입니다.
예 : Addrow 함수에 추가 :
$("#lblCustName" + _DynId + " input[name=CustName]").autocomplete(...);
(분명히 대체 ... 원하는 매개 변수로)
웹 서비스에서 Webservice에서 철회 한 데이터 객체를 글로벌 변수로 돌려 놓고이를 지원하고 아마도 자동 완성 옵션 (코드 복제를 피하기 위해)과 동일하게 사용할 수 있습니다.
제휴하지 않습니다 StackOverflow