Autocomplete jQuery on User Controller within Repeater .NET

Posted by TheDPQ on Stack Overflow See other posts from Stack Overflow or by TheDPQ
Published on 2010-02-23T23:56:17Z Indexed on 2010/03/08 15:21 UTC
Read the original article Hit count: 552

Filed under:
|
|
|
|

I have a Multiview search feature on a Web User Controller that is called within a Repeater, OHMY!!

I have some training sessions being listed out on a page, each calling an employeeSearch Web User Controller so people can search for employees to add to the training session. I have the Employee Names and Employee IDs listed out in JS on the page and using the jQuery autocomplete i have them search for the employee and populate a hidden field in the User controller. Once the process is done they have the option of adding yet another employee.

So i had Autocompelte 'work' in all the employee search boxes, but one i do the initial search (postback) autocomplete won't work again.

Then i updated $().ready(function() to pageLoad() so it works correctly on multiple searches but only in the LAST item of the repeater (jQuery is loaded on the User Controller)

FYI: I have the JS string set as EMPLOYEENAME|ID and jQuery displays the Employee Name and if they select it throws the ID in a 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>

I can already guess that by repeating pageLoad within the User Controll i override the previous pageLoad.

THE QUESTION: Is there a way around this, a way to have all the jQuery appear in a single pageLoad or to somehow have a single jquery call to handle all my search boxes?

I can't move the jQuery into the page calling all the controllers because i have no way of referencing the specific *tb_EmployeeName* textbox AND *hf_EmployeeID* hidden field.

Thank you so much for any help or insight you can give me into this problem.

This is the Multiview that on the 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: I never did find an answer but i had to do a demo so i hacked together something that 'works', but feels sort of cheesy. I am still very much needed of a better question or better understanding.

© Stack Overflow or respective owner

Related posts about .NET

Related posts about jQuery