Ajax Auto Complete Without WebServices in asp.net
In this I'm trying to explain to get the text based on user entry same like Google Search option. If we try to enter text in Google search related articles will be shown in bottom of the textbox, same like we give some demonstration in our ASP.net application using Ajax toolkit.
Ajax Auto Complete Without WebServices:
In this article I'm trying to explain how to work with Ajax Auto complete extender controls without webservices with small example.Description:
In this I'm trying to explain to get the text based on user entry same like Google Search option. If we try to enter text in Google search related articles will be shown in bottom of the textbox, same like we give some demonstration in our ASP.net application using Ajax toolkit.How to Work around this:
If we want to add ajax Controls then we must and should add Assembly Reference of that. Add ajax control toolkit dll's to the project by Right click on project section then choose Add Reference option and then choose AjaxControlToolkit dll.
Add assembly Reference of Ajax in source.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>Source Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoCompleteExtender.aspx.cs" Inherits="AutoCompleteExtender" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true">
</asp:ScriptManager>
Auto Complete Extender<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Employee Name : "></asp:Label>
<asp:TextBox ID="txt1" runat="server"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="autoExtender" runat="server" TargetControlID="txt1" ServiceMethod="GetEmpNames"
MinimumPrefixLength="1" CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"></ajaxToolkit:AutoCompleteExtender>
</div>
</form>
</body>
</html>
AutoCompleteExtender Properties:
TargetControlID - The TextBox control where the user types content to be automatically completed.
EnableCaching- Caching is turned on, so typing the same prefix multiple times results in only one call to the web service.
MinimumPrefixLength- Minimum number of characters that must be entered before getting suggestions from the web service.
CompletionInterval - Time in milliseconds when the timer will kick in to get suggestions using the web service.
CompletionSetCount - Number of suggestions to be retrieved from the web service.Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
using System.Configuration;
public partial class AutoCompleteExtender : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List
{
SqlConnection con = new SqlConnection("DataBase=ENGSOFT;User id=sa;Password=P@ssword9");
con.Open();
SqlCommand cmd = new SqlCommand("select empno, ename,job,mgr,hiredate,sal,comm,picture from emp where ename like '%'+ @Name+'%'", con);
cmd.Parameters.AddWithValue("@Name", prefixText);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
List
for (int i = 0; i < dt.Rows.Count; i++)
{
Empname.Add(dt.Rows[i]["ename"].ToString());
}
con.Close();
return Empname;
}
}OutPut:
ScriptManager:
<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" />
Without wrote this line in source code it's throws the server error to overcome this issue we just add above lines of code under div tag.
Conclusion:
At the time of searching information we are mostly recommended to use AjaxAutoCompleteExtender control to show the Result in bottom of the TextBox control.
Follow