Autocomplete jQuery auf Benutzer-Controller in Repeater .NET

Question

Ich habe eine Multiview-Suchfunktion auf einem Web-Benutzer-Controller, der innerhalb eines Repeaters aufgerufen wird, OHMY !!

Ich habe einige Trainingssitzungen auf einer Seite aufgelistet, die jeweils einen employeeSearch Web User Controller aufrufen, damit Mitarbeiter nach Mitarbeitern suchen können, die sie zur Trainingseinheit hinzufügen können. Ich habe die Angestellten-Namen und Angestellten-IDs, die in JS auf der Seite aufgeführt sind, und benutze die jQuery-Autocomplete-Funktion. Ich lasse sie nach dem Angestellten suchen und ein verstecktes Feld im Benutzer-Controller füllen. Sobald der Prozess abgeschlossen ist, haben sie die Möglichkeit, einen weiteren Mitarbeiter hinzuzufügen.

So hatte ich Autocompelte 'arbeiten' in allen Mitarbeitern Suchfelder, aber eine ich die erste Suche (Postback) Autocomplete wird nicht wieder funktionieren.

Dann aktualisiert $ i(). Ready (function() zu pageload() so funktioniert es korrekt auf mehreren Such aber erst in dem letzten Punkt des Repeaters (jQuery auf den User-Controller geladen)

FYI ich, der JS-String habe als EmployeeName set | ID und jQuery zeigt den Mitarbeiternamen und wenn sie es wählen sie die ID in einer ASP wirft: verstecktes Feld

<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> 

ich kann schon vermuten, dass pageload durch Wiederholung innerhalb des User-Controll Ich überschreibe die vorherige SeiteLoad.

DIE FRAGE: Gibt es einen Weg, um alle jQuery in einer einzigen pageLoad erscheinen zu lassen oder irgendwie einen einzigen jquery Aufruf für alle meine Suchfelder zu haben?

Ich kann nicht die jQuery in die Seite verschieben Sie alle Controller aufrufen, weil ich von Verweisen auf die spezifischen tb_EmployeeName Textbox keine Möglichkeit haben, UND hf_EmployeeID verstecktes Feld.

Vielen Dank für jede Hilfe oder Einsicht, die Sie mir in dieses Problem geben können.

Dies ist das Multiview, dass auf dem Benutzer-Controller

 <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

Dank Nalum war ich in der Lage, das Problem in einer viel besseren Weise zu lösen als mein vorheriger (gelöschter) Versuch. Jetzt habe ich eine einzige Funktion, die alle Instanzen für die Suchbox behandelt, ohne dass für jede erstellte Suchbox mehr Code generiert werden muss.

Das folgende JavaScript wird auf der übergeordneten Seite aufgerufen, die den Repeater enthält.

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]); 
     }); 


    }); 
}; 

ich nicht mit der Klasse 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> 

Dank wieder Nalum über Umwickeln der beiden Eingänge in einem div in der Multiview etwas geändert hat!

Answer 1

Ich bin ein bisschen raten hier, ich weiß nicht wirklich asp.net so korrigieren Sie mich, wenn ich falsch liege.

Ich gehe davon aus, dass Multiview tut eine Art von Ajaxy-Sache im Hintergrund von asp.net in diesem Fall, wenn Ihr Suchformular neu geladen wird die würde nicht für das neue Formular gelten.

Mehr als wahrscheinlich bin ich völlig falsch in dem, was ich gerade gesagt habe.

---

Edit für meinen zweiten Kommentar.

$('.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]); 
    }); 
});