Total Pageviews

Saturday 26 September 2015

Autocomplete for a input text box with update panel

SCRIPT
----------

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>


      <script>
        $(document).keypress(function (event) {
            if (event.keyCode == 13) {
                $("#<%= pm_search_btn.ClientID%>").click();
            }
        });
    </script>

   <script type="text/javascript">

       $(document).ready(function () {
           SearchText_m();
       });

       //On UpdatePanel Refresh.
       var prm = Sys.WebForms.PageRequestManager.getInstance();
       if (prm != null) {
           prm.add_endRequest(function (sender, e) {
               if (sender._postBackSettings.panelsToUpdate != null) {
                   SearchText_m();
               }
           });
       };
       function SearchText_m() {
           $(".autosuggest").autocomplete({
               source: function (request, response) {
                   $.ajax({
                       type: "POST",
                       contentType: "application/json; charset=utf-8",
                       url: "meetings.aspx/GetAutoCompleteData",
                       data: "{'search_txt':'" + document.getElementById('txtSearch').value + "'}",
                       dataType: "json",
                       success: function (data) {
                           response(data.d);
                       },
                       error: function (result) {
                           alert("Error");
                       }
                   });
               }
           });
       }

    </script>


HTML (meetings.aspx)
--------

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

  <asp:UpdatePanel ID="UpdatePanel1"
                        UpdateMode="Conditional"
                        runat="server">
                        <ContentTemplate>

<input type="text" id="txtSearch" placeholder="Search..." class="autosuggest" name="pm_search_txt" />

 <span style="display:none">

 <asp:Button ID="pm_search_btn" runat="server" Text="Button" OnClick="pm_search_btn_Click" />
       </span>

         </ContentTemplate>
                    </asp:UpdatePanel>



Code Behind
---------------

using System.Web.Services;  


 [WebMethod]

    public static List<string> GetAutoCompleteData(string search_txt)
    {
        List<string> result = new List<string>();
        string conn = ConfigurationManager.ConnectionStrings["meeting_mdf"].ConnectionString;
        using (SqlConnection con = new SqlConnection(conn))
        {
            using (SqlCommand cmd = new SqlCommand(" select top 10 ministry from (select DISTINCT  ministry from customer_ad )  as tb1 where  ministry  LIKE '%'+@SearchText+'%'", con))
            {
                con.Open();
                cmd.Parameters.AddWithValue("@SearchText", search_txt);
                SqlDataReader dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    result.Add(dr["ministry "].ToString());
                }
                return result;
            }
        }
    }


Now you can get data
 protected void pm_search_btn_Click(object sender, EventArgs e)
{

}


No comments:

Post a Comment