Autocompletar jQuery en el controlador de usuario dentro del repetidor .NET

Question

Tengo una función de búsqueda de Multiview en un controlador de usuario web que se llama dentro de un repetidor, ¡OHMY!

tengo algunas sesiones de entrenamiento que se enumeran a cabo en una página, cada una de llamar a un usuario del controlador Web employeeSearch que la gente pueda buscar empleados para agregar a la sesión de entrenamiento. Tengo los nombres de los empleados y las ID de los empleados enumerados en JS en la página y, usando el autocompletado de jQuery, les pido que busquen al empleado y rellenen un campo oculto en el controlador de usuario. Una vez que finaliza el proceso, tienen la opción de agregar otro empleado.

así que tuve Autocompelte 'trabajo' en todos los cuadros de búsqueda de empleados, pero hago la búsqueda (devolución) de autocompletar inicial no va a funcionar de nuevo.

$ Entonces he actualizado(). Ready (() para pageLoad() por lo que funciona correctamente en múltiples búsquedas, pero sólo en el último elemento del repetidor (jQuery se carga en el controlador del usuario)

FYI : he la cadena JS establecer como EmployeeName | Identificación y jQuery muestra el nombre del empleado y si seleccionan arroja el ID en un ASP: campo oculto

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

ya puedo adivinar que mediante la repetición de pageLoad dentro del usuario Controll®Innerseal Anulo la página anterior Load.

LA PREGUNTA: ¿Hay alguna forma de evitar esto, una forma de tener todo el jQuery en un solo pageLoad o de alguna manera tener una sola llamada jquery para manejar todos mis cuadros de búsqueda?

no puedo mover el jQuery en la página llamando a todos los controladores, porque no tengo manera de hacer referencia a la específica tb_EmployeeName cuadro de texto y hf_EmployeeID campo oculto.

Muchas gracias por cualquier ayuda o conocimiento que me puede dar en este problema.

Este es el Multiview que en el controlador de usuario

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

------------ ACTUALIZACIÓN -------------

Gracias a Nalum pude resolver el problema de una manera mucho mejor que mi intento anterior (eliminado). Ahora tengo una única función que maneja todas las instancias para el cuadro de búsqueda sin tener que generar más código para cada cuadro de búsqueda que se está creando.

Se está invocando el siguiente javascript en la página principal que contiene el repetidor.

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


    }); 
}; 

No he cambiado nada en el Multiview allá de envolver las dos entradas en un div con la clase 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> 

Gracias de nuevo Nalum!

Answer 1

Estoy adivinando aquí, realmente no conozco asp.net así que corrígeme si me equivoco.

Supongo que multiview está haciendo algo parecido a un tipo de ajaxy en el fondo de asp.net, en cuyo caso cuando se vuelva a cargar el formulario de búsqueda, el jQuery.autocomplete no se aplicará al nuevo formulario.

Es muy probable que esté completamente equivocado en lo que acabo de decir.

---

Editar para mi segundo comentario.

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