2009-11-28 49 views
0

我正在按鈕點擊動態地使用jQuery創建文本框。註冊動態控件使用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 
       }); 
      } 
     }); 

自動完成不工作的動態添加控件。

我想任何可能性的動態添加控件註冊的形式,從而使自動完成將爲動態添加控件

回答

1

的問題是,當你綁定的是自動完成它的結合領域的工作,匹配功能運行時的選擇器。如果您稍後添加的內容與其匹配,則不會自動綁定。

對於基本的jQuery的事件有一個Live結合,可以讓你自動做這個,但自動完成不會通過這項工作 - 基本上是你唯一的選擇就是在每次添加一個新的文本字段時綁定一個新的自動完成

EG:添加到AddRow功能:

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

你可能會希望把你的數據對象,你從WebService拉回(很明顯,你想要的參數取代...)在一個 全局變量來支持這一點,並可能與自動完成選項相同(只是爲了避免代碼重複)。

+0

如果我有成千上萬的客戶,那麼根據您的答案,如果我每次添加一個新控件時綁定,那麼它必須在新控件添加時不必要地調用數據庫,這會在應用程序端造成性能問題。任何想法,以避免數據庫調用。我也無法使用緩存,因爲用戶可能擁有不同數量的客戶。 – Prasad 2009-11-30 04:28:10

+0

如果您將getJSON調用的結果存儲在全局JavaScript變量中(或者如果您想要整潔,則使用名稱空間),那麼您將不必爲添加的每一個調用回服務器,而是可以重新使用現有的每次都是可變的。這就是我在文章最後一段提到的。你仍然可以使用輸出緩存,你應該查看VaryBy參數(如果你通過用戶ID改變輸出緩存,那麼每個用戶的信息將被單獨緩存),但是如果JavaScript不需要做的話,它仍然會更快即使它不會擊中分貝,也是一次往返。 – fyjham 2009-11-30 21:31:41