ASP.NET - want to create autocomplete (search) text box in master page

Asked By Justin Deva on 19-Jun-12 12:32 AM

    

want to create autocomplete (search) text box in master page...so that child pages can access the textbox....

Jitendra Faye replied to Justin Deva on 19-Jun-12 12:52 AM
Make use of Ajax AutoComplete Extender

<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePageMethods = "true">
</asp:ScriptManager>
 
<asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ServiceMethod="SearchCustomers"
    MinimumPrefixLength="2"
    CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"
    TargetControlID="txtContactsSearch"
    ID="AutoCompleteExtender1" runat="server" FirstRowSelected = "false">
</cc1:AutoCompleteExtender>

The following method is used to populate the Auto complete list of customers

[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]

public static List<string> SearchCustomers(string prefixText, int count)

{
  using (SqlConnection conn = new SqlConnection())
  {
    conn.ConnectionString = ConfigurationManager
      .ConnectionStrings["constr"].ConnectionString;
    using (SqlCommand cmd = new SqlCommand())
    {
    cmd.CommandText = "select ContactName from Customers where " +
    "ContactName like @SearchText + '%'";
    cmd.Parameters.AddWithValue("@SearchText", prefixText);
    cmd.Connection = conn;
    conn.Open();
    List<string> customers = new List<string>();
    using (SqlDataReader sdr = cmd.ExecuteReader())
    {
      while (sdr.Read())
      {
      customers.Add(sdr["ContactName"].ToString());
      }
    }
    conn.Close();
    return customers;
    }
  }
}
 
Note: It is very important that you keep the signature of the method same as what given above. The method must have two parameters namely
1. prefixText (string)
2. count (int)
Otherwise the method won’t work with AutoCompleteExtender.


Jitendra Faye replied to Justin Deva on 19-Jun-12 12:52 AM
If you want to use jquery and database then go for this link-

http://steptodotnet.blogspot.in/2012/06/auto-complete-textbox-using-jquery-and.html

Here you will get complete steps.
dipa ahuja replied to Justin Deva on 19-Jun-12 03:27 AM
Step 1 : Take a TextBox , AutoCompleteExtender
 
<asp:TextBox runat="server" ID="txtInput" Width="300" />
<cc1:AutoCompleteExtender runat="server" ID="AutoComplete1"
TargetControlID="txtInput"
ServiceMethod="GetNames"
ServicePath="WebService.asmx"
MinimumPrefixLength="1"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="20"/>
 
Step 2 : Add ScriptManager on page with <Services> tag
 
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
  <asp:ServiceReference Path="~/WebService.asmx" />
</Services>
</asp:ScriptManager>
 
Step 3: Add a Webservice file in your website by Right click on website->Add new Item ->Web Service and add this code inside it..
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
 
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
 
public class WebService : System.Web.Services.WebService
{
  public WebService()
  {
  }
 
  [WebMethod]
  public string[] GetNames(string prefixText, int count)
  {
    List<string> items = new List<string>(count);
    DataSet ds = new DataSet();
 
    string cs = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
    using (SqlConnection connection = new SqlConnection(cs))
    {
        string sql = "SELECT name FROM people WHERE name LIKE '" + prefixText + "%'";
      SqlDataAdapter adapter = new SqlDataAdapter();
      adapter.SelectCommand = new SqlCommand(sql, connection);
      adapter.Fill(ds);
    }
 
    foreach (DataRow dr in ds.Tables[0].Rows)
    {
      items.Add(dr["name"].ToString());
    }
 
    return items.ToArray();
  }
}