버튼 클릭 이벤트 후 jquery 자동 완료 호출

Question

jquery 자동 완성 기능을 호출하고 싶지만 버튼을 클릭 한 후 호출하려고합니다. 버튼 클릭 이벤트에서 gridview 및 텍스트 상자가 보이지 않는 경우 보이지 않습니다. 다음은

는

뒤에 내 코드 스크립트

$(document).ready(function() { 
      SearchText(); 
     }); 
     function SearchText() 
     { 
      $(".autosuggest").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         type: "POST", 
         contentType: "application/json; charset=utf-8", 
         url: "CalendarDetails.aspx/GetAutoCompleteData", 
         data: "{'Col3':'" + document.getElementById('txtSearch').value + "'}", 
         dataType: "json", 
         success: function (data) { 
          response(data.d); 
         }, 
         error: function (result) { 
          alert("Error"); 
         } 
        }); 
       } 
      }); 
     } 

HTML

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
      <asp:Label ID="Label4" runat="server" Text="ID" Font-Bold="True"></asp:Label> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList> 
      <br /> 
      <br /> 
      <asp:Label ID="Label1" runat="server" Text="Start Date" Font-Bold="True"></asp:Label> 
      <input type="text" id="datepickerStart" runat="server" /> 
      &nbsp; 
     <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="datepickerStart" ErrorMessage="*Mandatory field" ForeColor="Red"></asp:RequiredFieldValidator> 
      <br /> 
      <br /> 
      <asp:Label ID="Label2" runat="server" Text="End date" Font-Bold="True"></asp:Label> 
      &nbsp; &nbsp; 
      <input type="text" id="datepickerEnd" runat="server" /> 
      <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="datepickerEnd" ErrorMessage="*Mandatory field" ForeColor="Red"></asp:RequiredFieldValidator> 
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /> 
      <br /> 
      <br /> 
      <br /> 
      <br /> 
      <br /> 
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 



      <br /> 

편집

<input type="text" id="txtSearch" class="autosuggest" /> 
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" > 

      <ContentTemplate> 
       <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label> &nbsp;&nbsp;&nbsp; 

       <br /> 
       <br /> 
       <asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="20" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound"> 
        <HeaderStyle BackColor="#FFCC99" /> 

       </asp:GridView> 

      </ContentTemplate> 
      <Triggers> 
       <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="PageIndexChanging" /> 
       <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" /> 
      </Triggers> 
     </asp:UpdatePanel> 

     <br /> 
     <br /> 
     <br /> 
    </div> 

코드입니다

[WebMethod] 
    public static List<string> GetAutoCompleteData(string Col3) 
    { 
     List<string> result = new List<string>(); 
     if ((dtClone != null) && (dtClone.Rows.Count > 0)) 
     { 
      DataRow[] foundRows; 
      string expression = "Col3 LIKE '%" + Col3 + "%'"; 

      // Use the Select method to find all rows matching the filter. 
      foundRows = dtClone.Select(expression); 
      for (int i = 0; i < foundRows.Length; i++) 
       result.Add(foundRows[i][2].ToString()); 
     } 
     return result; 

    } 

문제는 버튼 클릭 이벤트 후 검색 작업을위한 자동 완성 (jquery)이 작동하지 않습니다. 문제가있는 곳에서 도와주세요. 내가 틀린 곳

Answer 1

코드를 보면 검색 텍스트 상자가 업데이트 패널 외부에있는 것처럼 보입니다.

$(document).ready(function() { 
    $(".autosuggest").autocomplete({ 
     source: function (request, response) { 
      var col3 = $("#txtSearch").val(); 
      $.ajax({ 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       url: "CalendarDetails.aspx/GetAutoCompleteData", 
       data: { Col3: JSON.stringify(col3) }, 
       dataType: "json", 
       success: function (data) { 
        response(data.d); 
       }, 
       error: function (result) { 
        alert("Error"); 
       } 
      }); 
     },  
    }); 
}); 

이 경우에 검색 텍스트 상자는 다음이 아약스를 통해로드됩니다 업데이트 패널 안에 당신은 업데이트 패널 위의 DOM 요소에 JQuery와 이벤트를 바인드 할 필요가 : 그래서 다음 코드는 작동합니다.

업데이트 패널 사업부 내부 포장 :

<div id="someDivOutsideUpdatePanel"> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" > 
     <input type="text" id="txtSearch" class="autosuggest" /> 
    </asp:UpdatePanel> 
</div> 

바인딩 사업부에 이벤트 :

$(document).ready(function() { 
    $("#someDivOutsideUpdatePanel .autosuggest").autocomplete({ 
     // Same code as above 
    }); 
});