how to work with auto complete extender with asp.net 4.0 with c#

Question

i just want to work with auto complete extenders for finding results that relates what user typing to text box. here is my code :

[System.Web.Script.Services.ScriptMethod()]
    [System.Web.Services.WebMethod]
    public static List<string> GetTickets(string prefixText)
    {
        using (DataClassesDataContext db = new DataClassesDataContext())
        {
            List<string> Tickets = new List<string>();
            string userid = db.Users.Where(u => u.Username.Equals((String)HttpContext.Current.Session["Username"])).Select(u => u.Ref_no).SingleOrDefault();
            var enquiry = db.Enquiries.Where(i => (i.ForwardTo.Equals(userid) || i.AttendBy.Equals(userid))).ToList(); 
            foreach(var item in enquiry)
            {
                if(item != null)
                {
                    var flag = db.Flags.Where(f => f.Enquiry_History_id.Equals(item.Ref_no) && f.User_id.Equals(userid)).Select(f => new { IsDisplay = f.IsDisplay,IsRead = f.IsRead }).ToList();
                    bool IsIns = true;
                    foreach (var item1 in flag)
                    {
                        if (item1.IsDisplay == false)
                        {
                            IsIns = false;
                        }
                        if (item1.IsRead == true)
                        {
                            IsIns = false;
                        }
                    }
                    if (IsIns == true)
                    {
                        Tickets.Add(item.Ref_no.ToString());
                    }
                }
            }
            return Tickets;
        }
    }

and here is my design code :

    <asp:TextBox ID="TextBox1" runat="server" CssClass="input" Width="115px"                                                                      ValidationGroup="TicketSearch"></asp:TextBox>
     <ajaxToolkit:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"
MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000" ServiceMethod="GetTickets"
TargetControlID="TextBox1" CompletionListCssClass="popUpDialog">
</ajaxToolkit:AutoCompleteExtender>

and for displaying result found i include this css class like :

.popUpDialog
        {
            z-index: 99 !important;
        }

        .autoComplete_listMain
        {
            z-index: 2147483647 !important;
            background: #ffffff;
            border: solid 2px #808080;
            color: #000000;
        }

-------------------------------Updated----------------------------------

now i use this technique :

<script language="javascript" type="text/javascript">
    $(function () {
        $('#<%=TextBox1.ClientID%>').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "MasterPage.master/GetTickets",
                    data: "{ 'pre':'" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return { value: item }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            }
        });
    });
</script>

this is design :

<ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="TextBox1" ServicePath="" ServiceMethod="GetTickets" MinimumPrefixLength="1" EnableCaching="true" CompletionListCssClass="completionList" 
                                                                                                                    CompletionListItemCssClass="listItem" 
                                                                                                                    CompletionListHighlightedItemCssClass="itemHighlighted"/>

at code behind :

 [System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
    [System.Web.Services.WebMethod]
    public static List<string> GetTickets(string prefixText)
    {
        using (DataClassesDataContext db = new DataClassesDataContext())
        {
            List<string> Tickets = new List<string>();
            string userid = db.Users.Where(u => u.Username.Equals((String)HttpContext.Current.Session["Username"])).Select(u => u.Ref_no).SingleOrDefault();
            var enquiry = db.Enquiries.Where(i => (i.ForwardTo.Equals(userid) || i.AttendBy.Equals(userid))).ToList();
            foreach (var item in enquiry)
            {
                if (item != null)
                {
                    var flag = db.Flags.Where(f => f.Enquiry_History_id.Equals(item.Ref_no) && f.User_id.Equals(userid)).Select(f => new { IsDisplay = f.IsDisplay, IsRead = f.IsRead }).ToList();
                    bool IsIns = true;
                    foreach (var item1 in flag)
                    {
                        if (item1.IsDisplay == false)
                        {
                            IsIns = false;
                        }
                        if (item1.IsRead == true)
                        {
                            IsIns = false;
                        }
                    }
                    if (IsIns == true)
                    {
                        Tickets.Add(item.Ref_no.ToString());
                    }
                }
            }
            return Tickets;
        }
    }

i found this error at run time :

Server Error in '/CRM' Application.

This type of page is not served.

Description: The type of page you have requested is not served because it has been explicitly forbidden.     Please review the URL below and make sure that it is spelled correctly. 

Requested URL: /CRM/Staff/MasterPage.master/GetTickets

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1

--------------------------Updated-----------------------

i have tried that was suggested from Jalpesh

here i create one service like :

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Linq;
using System.Configuration;
using System.Collections.Generic;
/// <summary>
/// Summary description for AutoComplete
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
// [System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService
{

    public AutoComplete()
    {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public List<string> GetTicketList(string prefixText)
    {
        using (DataClassesDataContext db = new DataClassesDataContext())
        {
            List<string> Tickets = new List<string>();
            string userid = db.Users.Where(u => u.Username.Equals((String)HttpContext.Current.Session["Username"])).Select(u => u.Ref_no).SingleOrDefault();
            var enquiry = db.Enquiries.Where(i => (i.ForwardTo.Equals(userid) || i.AttendBy.Equals(userid))).ToList();
            foreach (var item in enquiry)
            {
                if (item != null)
                {
                    var flag = db.Flags.Where(f => f.Enquiry_History_id.Equals(item.Ref_no) && f.User_id.Equals(userid)).Select(f => new { IsDisplay = f.IsDisplay, IsRead = f.IsRead }).ToList();
                    bool IsIns = true;
                    foreach (var item1 in flag)
                    {
                        if (item1.IsDisplay == false)
                        {
                            IsIns = false;
                        }
                        if (item1.IsRead == true)
                        {
                            IsIns = false;
                        }
                    }
                    if (IsIns == true)
                    {
                        Tickets.Add(item.Ref_no.ToString());
                    }
                }
            }
            return Tickets;
        }
    }
}

here is my auto complete extender :

  <ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="TextBox1" ServicePath="AutoComplete.asmx" ServiceMethod="GetTicketList" MinimumPrefixLength="1" EnableCaching="true" CompletionListCssClass="completionList" 
                                                                                                                    CompletionListItemCssClass="listItem" 
                                                                                                                    CompletionListHighlightedItemCssClass="itemHighlighted"/>      

and finally here jquery for calling it :

<script language="javascript" type="text/javascript">
    $(function () {
        $('#<%=TextBox1.ClientID%>').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "AutoComplete.asmx/GetTicketList",
                    data: "{ 'pre':'" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return { value: item }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            }
        });
    });
</script>

this gives me error like that :

Server Error in '/CRM' Application.

Request format is unrecognized for URL unexpectedly ending in '/GetTicketList'.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.InvalidOperationException: Request format is unrecognized for URL unexpectedly ending in '/GetTicketList'.

Source Error: 

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace: 


[InvalidOperationException: Request format is unrecognized for URL unexpectedly ending in '/GetTicketList'.]
   System.Web.Services.Protocols.WebServiceHandlerFactory.CoreGetHandler(Type type, HttpContext context, HttpRequest request, HttpResponse response) +518909
   System.Web.Services.Protocols.WebServiceHandlerFactory.GetHandler(HttpContext context, String verb, String url, String filePath) +212
   System.Web.Script.Services.ScriptHandlerFactory.GetHandler(HttpContext context, String requestType, String url, String pathTranslated) +47
   System.Web.HttpApplication.MapHttpHandler(HttpContext context, String requestType, VirtualPath path, String pathTranslated, Boolean useAppConfig) +203
   System.Web.MapHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +128
   System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +184

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1

Answer 1

You have not putted service path in your Autocomplete extender.

ServicePath="AutoComplete.asmx"

Also have you putted script manager above the Autocomplete extender. If not please put this like below.

<ajaxToolkit:ToolkitScriptManager  ID="ScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>