オートコンプリート用の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イベントには、ライブバインディングがあり、これを自動的に行うことができますが、オートコンプリートこれでは動作しません-基本的に唯一の選択肢は、新しいテキストフィールドを追加するたびに新しいオートコンプリートをバインドすることです
EG:AddRow関数に追加:
$("#lblCustName" + _DynId + " input[name=CustName]").autocomplete(...);
(明らかに...を必要なパラメータに置き換えます)
これをサポートするために、おそらくウェブサービスから引き戻したデータオブジェクトをグローバル変数に配置し、おそらくオートコンプリートオプションでも同じようにします(コードの重複を避けるため)。
所属していません StackOverflow