Pages

Wednesday, July 3, 2013

How to Creat AutoComplete Textbox in Asp.net

Introduction
To create autocomplete textbox you in asp.net firstly you will have to add Ajex control with your visual studio toolbox. After add Ajax control follow this steps.
Step 1
Add ScriptManager and update panel Ajax control to your Default.aspx page.
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
          <ContentTemplate>
          
          </ContentTemplate>
        </asp:UpdatePanel>
 
    </div>
    </form>
</body>
Step 2
Now in this step add a textbox and AutoCompleteExtender in ContentTemplate of update panel. After add both control set textbox id in AutoCompleteExtender TargetControlID as the following.
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox runat="server" ID="TextBox1"
                style="top: 201px; left: 524px; position: absolute; height: 22px; width: 215px"></asp:TextBox>
            <asp:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"
                DelimiterCharacters="" Enabled="True" ServiceMethod="GetCompletionList"
                ServicePath="" TargetControlID="TextBox1" UseContextKey="True" MinimumPrefixLength="1" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
                 CompletionListItemCssClass="autocomplete_listItem"        CompletionListCssClass="autocomplete_completionListElement">
            </asp:AutoCompleteExtender>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
Step 3
Now go on Default.aspx.cs page and write following code.
public partial class AutoComplite : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string[] GetCompletionList(string prefixText, int count, string contextKey)
    {
        string s = prefixText + "%";
        List<string> str = new List<string>();
        SqlDataReader dr;
        SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=prabhakar;Integrated Security=True");
        SqlCommand cmd = new SqlCommand("select id from Table where id like '" + s + "'",con);
        con.Open();
        dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
        while(dr.Read())
        {
            str.Add(dr["id"].ToString());
        }
        return str.ToArray();
    }
}
Step 4
Finally run your project you will see result.
Step 5
If you want to do this in disconnected mode then use following code.
public partial class AutoComplite : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string[] GetCompletionList(string prefixText, int count, string contextKey)
    {
        string s = prefixText + "%";
        List<string> str = new List<string>();
        SqlDataReader dr;
        SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=prabhakar;Integrated Security=True");
        SqlCommand cmd = new SqlCommand("select id from prabh where id like '" + s + "'",con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        foreach (DataRow dr in ds.Tables[0].Rows)
        {
            str.Add(dr["id"].ToString());
        }
    }

}

No comments:

Post a Comment