4

ASP.NetでWebサービスを使用してjQueryオートコンプリートを使用しています。オートコンプリートを使用して従業員コードをフィルタリングしました。ページが読み込まれるとオートコンプリートは正常に機能しますが、検索ボタンをクリックするとオートコンプリートが正しく機能しません。

問題はdocument.ready関数にあると思うので、ページが読み込まれると正常に機能しますが、buttonclickイベントの後にオートコンプリートを使用する必要があります。これどうやってするの ？？？

これが私のjQueryオートコンプリートです

<link href="../AutoComplete/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="../AutoComplete/jquery.min.js" type="text/javascript"></script>
<script src="../AutoComplete/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#<%=txtEmpcode.ClientID %>").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/MyWebService.asmx/FetchEmpCode") %>',
                data: "{ 'Empcode': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[1],
                            //val: item
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        minLength: 1
    });
});
</script>

マークアップ

<td align="right">
<asp:Label ID="lblEmpCodeSrch" runat="server" Text="EmpCode" CssClass="label">   </asp:Label>
 </td>
 <td>
  <asp:TextBox ID="txtEmpCodeSrch" runat="server" Width="250px" ToolTip="Enter Employeecode"></asp:TextBox>
   &nbsp;&nbsp;<asp:Button ID="bttnSearch" runat="server" CssClass="submit" Height="23px" Text="Search" onclick="bttnSearch_Click" />
  </td>

ButtonSearchコードビハインド

protected void bttnSearch_Click(object sender, EventArgs e)
{
    clsEmp.EMPLOYEEID =txtEmpCodeSrch.Text.Trim()==""?                                                                                   0:Convert.ToInt32(hFieldEmpId.Value);
    DataTable dtEmp = clsEmp.GetDetails();
    if (dtEmp.Rows.Count > 0)
    {
        hFieldEmpId.Value = "";
       // txtEmpCodeSrch.Text = "";
        if (ViewState["Sort"] != null)
        {
            DataView dView = new DataView(dtEmp);
            dView.Sort = ViewState["Sort"].ToString();
            gdView.DataSource = dView;
            gdView.DataBind();
        }
        else
        {
            gdView.DataSource = dtEmp;
            gdView.DataBind();
        }
    }
}
4

2 に答える 2

20

UpdatePanelを使用している場合、データの更新後にjavascriptを再初期化する必要があります。これは、古いものが機能しなくなったため、htmlページの構造が変更されたため、domが変更されたためです。

UpdatePanelは、クライアント側でそれを行うための関数を提供しており、コードは次のようになります。

<script type="text/javascript"> 
   // if you use jQuery, you can load them when dom is read.
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init of the autocomplete
       InitAutoCompl();
    });        

    function InitializeRequest(sender, args) {
    }

    function EndRequest(sender, args) {
       // after update occur on UpdatePanel re-init the Autocomplete
       InitAutoCompl();
    }

   function InitAutoCompl() {
      $("#<%=txtEmpcode.ClientID %>").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/MyWebService.asmx/FetchEmpCode") %>',
                data: "{ 'Empcode': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[1],
                            //val: item
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        minLength: 1
   });
  }    
  </script>
于 2012-09-24T19:37:05.167 に答える
-1

UpdatePanelタグ内にトリガーを追加することで問題を解決できるため、私の場合は目的の動作を実現できます。私が助けてくれたように、あなたがあなたに仕えることを願っています。

<ajax:UpdatePanel>
    <ContentTemplate>
        //My label fire autocomplete
        <asp:TextBox id="MyLabelForAutoComplete" runat="server"/>
        // Other Html Tags...

    <Triggers>
        <ajax:PostBackTrigger ControlID="MyLabelForAutoComplete">
    </Triggers>
</ajax:UpdatePanel>
于 2016-10-05T15:37:34.407 に答える