Autocomplete jQuery auf Benutzer-Controller innerhalb Repeater .NET

Question

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

Ich habe einige Schulungssitzungen, die auf einer Seite aufgelistet sind und jeweils einen employeeSearch Web User Controller aufrufen, damit die Teilnehmer nach Mitarbeitern suchen können, die sie der Schulungssitzung hinzufügen möchten. Ich habe die Mitarbeiternamen und Mitarbeiter-IDs in JS auf der Seite aufgelistet und mit der jQuery Autovervollständigung habe ich sie für die Mitarbeiter suchen und füllen ein verstecktes Feld in der User-Controller. Sobald der Prozess abgeschlossen ist, haben sie die Möglichkeit, noch einen weiteren Mitarbeiter hinzuzufügen.

So hatte ich Autocompelte "Arbeit" in allen Mitarbeitern Suchfelder, aber ein ich die erste Suche (postback) Autocomplete wird nicht wieder funktionieren.

Dann habe ich $().ready(function() zu pageLoad() aktualisiert, so dass es korrekt auf mehrere Suchen, aber nur im LAST Element des Repeaters (jQuery wird auf dem User Controller geladen) funktioniert

FYI: Ich habe die JS-Zeichenfolge als EMPLOYEENAME|ID und jQuery zeigt den Namen des Mitarbeiters und wenn sie wählen es wirft die ID in einem ASP: HIDDEN FIELD

    <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 mir schon denken, dass ich durch die Wiederholung von pageLoad innerhalb der User Controll das vorherige pageLoad überschreibe.

DIE FRAGE: Gibt es eine Möglichkeit, um dies zu umgehen, eine Möglichkeit, alle jQuery in einer einzigen pageLoad erscheinen oder irgendwie einen einzigen Jquery-Aufruf haben, um alle meine Suchfelder zu behandeln?

Ich kann die jQuery nicht in die Seite verschieben, die alle Controller aufruft, weil ich keine Möglichkeit habe, auf die spezifischen zu verweisen tb_EmployeeName Textfeld UND hf_EmployeeID verstecktes Feld.

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

Dies ist die Multiview-Ansicht, die auf dem User 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 konnte ich das Problem viel besser lösen als bei meinem vorherigen (gelöschten) Versuch. Jetzt habe ich eine einzige Funktion, die alle Instanzen für das Suchfeld behandelt, ohne dass mehr Code für jedes Suchfeld erstellt wird.

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

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 habe nichts an der Multiview geändert, außer dass ich die beiden Eingänge in ein div 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>

Nochmals vielen Dank, Nalum!