Arturito.net

Come to The Dark Side, We Have Cookies!

C# ASP.NET Ajax AutoCompleteExtender with AjaxControlToolkit

with 2 comments

Here is a tutorial on how to create autocomplete using AjaxControlToolkit

Create ASP.NET Web Application and paste this code:

    <div>
        <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
        <asp:AutoCompleteExtender ID="AutoCompleteExtender1"
                                  runat="server"
                                  TargetControlID="TextBox1"
                                  ServicePath="AutoCompleter.asmx"
                                  ServiceMethod="GetFilmTitles"
                                  MinimumPrefixLength="1"
                                  Enabled="true"
                                  EnableCaching="true"
        >
        </asp:AutoCompleteExtender>
    </div>

Add WebService to the project and call it AutoCompleter.

Paste this code:


[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ToolboxItem(false)]

[ScriptService]

public class AutoCompleter : System.Web.Services.WebService

{

[WebMethod]

[ScriptMethod()]

public string[] GetFilmTitles(string prefixText)

{

ArrayList sampleList = new ArrayList();

sampleList.Add("Akira");

sampleList.Add("Afro Samurai");

sampleList.Add("Gantz");

sampleList.Add("Naruto");

sampleList.Add("Darker Than Black");

sampleList.Add("Monster");

sampleList.Add("Death Note");

sampleList.Add("Berkserk");

sampleList.Add("Evangelion");

sampleList.Add("Full Metal Alchemist");

sampleList.Add("One Piece");

sampleList.Add("Elfen Lied");

sampleList.Add("Ghost In The Shell");<span style="white-space: pre;"> </span>

ArrayList filteredList = new ArrayList();

foreach (string s in sampleList)

{

if (s.ToLower().StartsWith(prefixText.ToLower()))

filteredList.Add(s);

}

return (string[])filteredList.ToArray(typeof(string));

}

}

and vuala! :)

Written by guru

May 20th, 2010 at 12:15 pm

Posted in C sharp

  • Anjana

    AutoCompleteExtender is getting hide from other dropdown control which is just below the AutoCompleteExtender

    • arturito

      You mean the top AutoCompleter goes under the one which is below? In that case it is the matter of changing css property: z-index. (I had exactly the same problem :) )