자동 완성을위한 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 이벤트의

가 당신이이 작업을 자동으로 수행 할 수 있습니다 바인딩 Live있다, 그러나 자동 완성이를 통해 작동하지 않습니다 - 기본적으로 유일한 선택은 새로운 자동 완성을 새 텍스트 필드를 추가 할 때마다 결합하는 것입니다

EG 다음 AddRow 기능에 추가

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

당신은 웹 서비스에서 철수하는 것이

당신은 가능성이 데이터를 입력 할 수 있습니다

객체 (물론 당신이 원하는 매개 변수 ... 대체) 안에 전역 변수를 지원하고 자동 완성 옵션 (코드 중복을 피하기 위해)과 동일 할 수도 있습니다.