autocomplete를 위해 jQuery를 사용하여 동적 컨트롤을 등록하십시오

Question

버튼 클릭에서 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
                 });
             }
         });

자가 완성은 동적으로 추가 된 컨트롤을 위해 작동하지 않습니다.

동적으로 추가 된 컨트롤을 양식에 등록 할 가능성이 있으므로 동적으로 추가 된 컨트롤에 자동 완성이 작동하도록합니다.

Answer 1

문제는 자동 완성을 바인딩 할 때 함수가 실행될 때 선택기와 일치하는 필드에 바인딩된다는 것입니다. 나중에 일치하는 무언가를 추가하면 자동으로 바인딩되지 않습니다.

기본적인 jQuery 이벤트의 경우 a가 있습니다 살다 이를 자동으로 수행 할 수있는 바인딩이지만 AutoComplete는이를 통해 작동하지 않습니다. 기본적으로 유일한 선택은 새 텍스트 필드를 추가 할 때마다 새 자동 완성을 바인딩하는 것입니다.

예 : Addrow 함수에 추가 :

$("#lblCustName" + _DynId + " input[name=CustName]").autocomplete(...);

(분명히 대체 ... 원하는 매개 변수로)

웹 서비스에서 Webservice에서 철회 한 데이터 객체를 글로벌 변수로 돌려 놓고이를 지원하고 아마도 자동 완성 옵션 (코드 복제를 피하기 위해)과 동일하게 사용할 수 있습니다.