6

我在中继器内调用的 Web 用户控制器上有一个多视图搜索功能，哦！

我在一个页面上列出了一些培训课程，每个课程都调用一个employeeSearch Web 用户控制器，以便人们可以搜索员工以添加到培训课程中。我在页面上的 JS 中列出了员工姓名和员工 ID，并使用 jQuery 自动完成功能让他们搜索员工并在用户控制器中填充隐藏字段。完成该过程后，他们可以选择添加另一名员工。

所以我在所有员工搜索框中都有自动完成“工作”，但我做的初始搜索（回发）自动完成将不再工作。

然后我将 $().ready(function() 更新为 pageLoad() 以便它在多个搜索中正常工作，但仅在中继器的最后一个项目中（jQuery 加载在用户控制器上）

仅供参考：我将 JS 字符串设置为 EMPLOYEENAME|ID 并且 jQuery 显示员工姓名，如果他们选择它，则会在 ASP:HIDDEN FIELD 中抛出 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>

我已经可以猜到，通过在用户控件中重复 pageLoad，我会覆盖之前的 pageLoad。

问题： 有没有办法解决这个问题，让所有 jQuery 出现在单个 pageLoad 中，或者以某种方式让单个 jquery 调用来处理我所有的搜索框？

我无法将 jQuery 移动到调用所有控制器的页面中，因为我无法引用特定的tb_EmployeeName文本框和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>

- - - - - - 更新 - - - - - - -

感谢 Nalum，我能够以比我之前（已删除）的尝试更好的方式解决问题。现在我有一个函数可以处理搜索框的所有实例，而无需为每个正在创建的搜索框生成更多代码。

在包含转发器的父页面上调用以下 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]);
        });


    });
};

除了使用ea_Autocomplete类将两个输入包装在 div 中之外，我没有更改 Multiview 中的任何内容

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

再次感谢纳鲁姆！

4

1 回答 1

2

我在这里有点猜测，我真的不知道asp.net，如果我错了，请纠正我。

我假设 multiview 在 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]);
    });
});
于 2010-02-24T17:37:25.087 回答