Repeater .NET中的用戶控制器上的自動完成jQuery

Question

我在一個Web用戶控制器上的多視圖搜索功能，在Repeater，OHMY中調用！

我在頁面上列出了一些培訓課程，每個培訓課程都會調用employeeSearch Web用戶控制器，以便人們可以搜索員工以添加到培訓課程。我在頁面上列出了JS中的員工名稱和員工ID，並使用jQuery自動完成我讓他們搜索員工並在用戶控制器中填充隱藏字段。一旦這個過程完成，他們可以選擇添加另一個員工。

因此，我在所有員工搜索框中都有Autocompelte'work'，但我做了一次初始搜索（回發）自動完成功能，不會再次工作。

然後我更新$（）。就緒（函數（）到頁面加載（），所以它正常工作在多個搜索，但只在中繼器的最後一個項目（jQuery是加載在用戶控制器）

FYI ：我JS字符串設定爲EMPLOYEENAME | ID和jQuery顯示員工姓名，如果他們選擇它拋出一個ASP的ID：隱藏字段

<script type="text/javascript"> 

    format_item = function(item, position, length) { 
     var str = item.toString().split("|", 2);   
     return str[0]; 
    } 

    function pageLoad() {  
     $("#<%=tb_EmployeeName.ClientID %>").autocomplete(EmployeeList, { 
      minChars: 0, 
      width: 500, 
      matchContains: true, 
      autoFill: false, 
      scrollHeight: 300, 
      scroll: true, 
      formatItem: format_item, 
      formatMatch: format_item, 
      formatResult: format_item 
     }); 
     $("#<%=tb_EmployeeName.ClientID %>").result(function(event, data, formatted) {     
      var str = data.toString().split("|", 2); 
      $("#<%=hf_EmployeeID.ClientID %>").val(str[1]); 
     }); 
    };  

    </script> 

我已經可以猜測出用戶中的重複頁面加載控制研究我覆蓋上一頁的頁面。

問題：有沒有辦法解決這個問題，讓所有的jQuery出現在一個pageLoad中，或者以某種方式讓一個jquery調用來處理我所有的搜索框？

我動不了了jQuery到調用所有的控制器，因爲我沒有引用具體tb_EmployeeName TextBox和hf_EmployeeID隱藏字段的方式頁面。

非常感謝您提供任何幫助或洞察力，您可以告訴我這個問題。

這是多視圖，關於用戶控制器

 <asp:MultiView ID="mv_EmployeeArea" runat="server" ActiveViewIndex="0"> 

     <asp:View ID="vw_Search" runat="server">     
      <asp:Panel ID="eSearch" runat="server"> 
       <b>Signup Employee Search</b> (<i>Last Name, First Name</i>)<br /> 
       <asp:TextBox ID="tb_EmployeeName" class="EmployeeSearch" runat="server"></asp:TextBox> 
       <asp:HiddenField ID="hf_EmployeeID" runat="server" /> 

       <asp:Button ID="btn_Search" runat="server" Text="Search" /> 
      </asp:Panel>      
     </asp:View> 

     <asp:View ID="vw_Confirm" runat="server"> 
      <b>Signup Confirmation</b> 
      <asp:FormView ID="fv_EmployeeInfo" runat="server"> 
       <ItemTemplate> 
        <%#(Eval("LastName"))%>, <%#(Eval("FirstName"))%><br /> 
       </ItemTemplate> 
      </asp:FormView>  
      <asp:Button ID="btn_Confirm" runat="server" Text="Signup this employee" /> &nbsp; <asp:Button ID="btn_Reset3" runat="server" Text="Reset" /> 
     </asp:View> 

     <asp:View ID="vw_ThankYou" runat="server"> 
      <b>Thank You</b><br /> 
      The employee has been signed up and an email confirmation has been sent out.<br /><br /> 
      <asp:Button ID="btn_Reset" runat="server" Text="Reset" /> 
     </asp:View>    

    </asp:MultiView> 

------------ UPDATE -------------

感謝納洛姆，我能夠以更好的方式解決問題，然後我以前的（刪除）嘗試。現在我有一個函數可以處理搜索框的所有實例，而無需爲每個正在創建的搜索框生成更多的代碼。

以下JavaScript正在包含中繼器的父頁面上調用。

format_item = function(item, position, length) { 
    var str = item.toString().split("|", 2); 
    return str[0]; 
} 

function pageLoad() { 
    $(".ea_Autocomplete").each(function(i, element) { 

     var tb_EmployeeName = $(this).children('input[id*=tb_EmployeeName]:first') 
     var hf_EmployeeID = $(this).children('input[id*=hf_EmployeeID]:first') 

     tb_EmployeeName.autocomplete(EmployeeList, { 
      minChars: 0, 
      width: 500, 
      matchContains: true, 
      autoFill: false, 
      scrollHeight: 300, 
      scroll: true, 
      formatItem: format_item, 
      formatMatch: format_item, 
      formatResult: format_item 
     }); 

     tb_EmployeeName.result(function(event, data, formatted) { 
      var str = data.toString().split("|", 2); 
      hf_EmployeeID.val(str[1]); 
     }); 


    }); 
}; 

我沒有改變在多視點之外的東西在一個div類再次ea_Autocomplete

<asp:Panel ID="eSearch" runat="server"> 
       <b>Signup Employee Search</b> (<i>Last Name, First Name</i>)<br /> 
       <div class="ea_Autocomplete"> 
        <asp:TextBox ID="tb_EmployeeName" class="EmployeeSearch" runat="server"></asp:TextBox> 
        <asp:HiddenField ID="hf_EmployeeID" runat="server" /> 
       </div>                     

       <asp:Button ID="btn_Search" runat="server" Text="Search" /> 
    </asp:Panel> 

感謝Nalum包裹的兩個輸入端！

Answer 1

我有點在這裏猜，我真的不知道asp.net所以糾正我，如果我錯了。

我假設多視圖在asp.net的背景下做某種ajaxy類型的事情，在這種情況下，當您的搜索表單被重新加載時，jQuery.autocomplete不適用於新表單。

更可能我完全錯了我剛纔所說的。

---

編輯我的第二個評論。

$('.autocomplete').each(function(i,element){ 
    $(element).autocomplete({...}); 
    $(element).result(function(event, data, formatted) { 
     // Now based on you're element id you can build up an id and work with that 
     var id = element.id + '-extra-stuff';    
     var str = data.toString().split("|", 2); 
     $('#' + id).val(str[1]); 
    }); 
});