Autocomplete Textbox with AJAX Extender

By Pallav Kumar
08 Jan 2016
0
5284

In this Blog you will learn, how to implement autocomplete textbox using AJAX extender.

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better and faster web applications with the help of XML, HTML, CSS and Javascript.

Why we need autocomplete textbox?

So, the answers is When lots of data we use is the one to choose.

Description

Create a table name "skills"

CREATE TABLE [dbo].[Skills](

[SkillID] [bigint] NOT ,

[Skills] [nvarchar](max)

) ON [PRIMARY]

Fill some data in this table.

Code

<asp:TextBox ID="txtTags" runat="server" Font-Bold="True" Width="100%" ></asp:TextBox>
  <asp:AutoCompleteExtender ServiceMethod="GetSkills" MinimumPrefixLength="1"  CompletionInterval="100" EnableCaching="false" CompletionSetCount="1" TargetControlID="txtTags" ID="AutoCompleteExtender1" runat="server" FirstRowSelected="True" ShowOnlyCurrentWordInCompletionListItem="true"></asp:AutoCompleteExtender>

Now we have to create a web service which will handle the jQuery Autocomplete calls and will return the matching records from the skill table. The select query gets the Skills that matches the prefix textbox text.

Backend C# code:

[System.Web.Script.Services.ScriptMethod()]  [System.Web.Services.WebMethod]       public static List<string> GetSkills(string prefixText, int count)       {           SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["BlogTest"].ToString());           SqlCommand com = new SqlCommand("select skills from skills where skills LIKE ''+@SearchText+'%'", conn);           com.Parameters.AddWithValue("@SearchText", prefixText);           conn.Open();           List<string> Tags = new List<string>();           using (SqlDataReader sdr = com.ExecuteReader())           {               while (sdr.Read())               {                   Tags.Add(sdr["skills"].ToString());               }           }           conn.Close();           return Tags;       }

Demo