Saturday, January 29, 2011

Ajax Auto-complete

Download  AjaxControlToolkit.dll
Add refrence in page,Make a webservice autocomplet.asmx
open autocomplet.cs in app_code



using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoComplete : WebService
{
    public AutoComplete()
    {
    }
    private static string _GroupCode;
    string conn = ConfigurationManager.AppSettings["ConnectionString"].ToString();
    public string GroupCode
    {
        set
        {
            _GroupCode = value;
        }
        get
        {
            return _GroupCode;
        }
    }
    [WebMethod]
    public string[] GetCompletionList(string prefixText, int count)
    {
        //string conn = ConfigurationManager.AppSettings["ConnectionString"].ToString();
        SqlConnection con = new SqlConnection(conn);
        con.Open(); SqlCommand cmd = new SqlCommand();
        string Query; string[] temp = prefixText.Trim().Split(' ');
        Query = "SELECT Question, answer FROM faq WHERE";
        for (int i = 0; i < temp.Length; i++)
        {
            Query = Query + " Question LIKE \'%" + temp[i] + "%\'";
            if (i < (temp.Length - 1))
            {
                Query = Query + " OR";
            }
        }
        cmd.CommandText = Query;
        cmd.Connection = con;
        SqlDataReader dr = cmd.ExecuteReader();
        DataTable dt = new DataTable();
        dt.Load(dr); con.Close();
        string[] r = new string[dt.Rows.Count];

        for (int i = 0; i < dt.Rows.Count; i++)
        {
            r[i] = dt.Rows[i][0].ToString();
        }
        return r;
    }
}


////////Add refrence in aspx page

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>


<asp:TextBox ID="Mytextbox" runat="server" AutoCompleteType="Search"
                    Width="300px" CssClass="txtbox"></asp:TextBox>
 <ajaxToolkit:AutoCompleteExtender
    runat="server"
    ID="autoComplete"
    TargetControlID="Mytextbox"
    ServiceMethod="GetCompletionListall"
    ServicePath="AutoComplete.asmx"
    MinimumPrefixLength="2"
    CompletionInterval="100"
    CompletionSetCount="20"
    CompletionListCssClass="autocomplete_completionListElement"
    CompletionListItemCssClass="autocomplete_listItem"
    CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
    DelimiterCharacters=","
    BehaviorID="AutoCompleteEx"
    OnClientPopulated="HideImage" OnClientPopulating="ShowImage"
   Enabled="true">            
</ajaxToolkit:AutoCompleteExtender>        




Add script

<script language="javascript" type="text/javascript">

    function ShowImage()
    {
        document.getElementById('<%=Mytextbox.ClientID %>').style.backgroundImage = 'url(img/wait.gif)';
        document.getElementById('<%=Mytextbox.ClientID %>').style.backgroundRepeat = 'no-repeat';
        document.getElementById('<%=Mytextbox.ClientID %>').style.backgroundPosition = 'right';
    }
    function HideImage()
    {
       document.getElementById('<%=Mytextbox.ClientID %>').style.backgroundImage = 'none';
    }
</script>

download image and place in img folder wait.gif

place code in .cs page on load

    protected void Page_Load(object sender, EventArgs e)
    {


        this.Mytextbox.Attributes.Add("onkeypress", "ShowImage()");
        this.Mytextbox.Attributes.Add("onblur", "HideImage()");
    }

No comments:

Post a Comment