jQuery Autocomplete with C# and SQL Server Database

Question

I am trying to use jQuery autocomplete on my dynamically created textboxes. this is my first time working with jQuery so I am not so sure about where I am getting off... My ASMX page code is working fine & generating result as asked but my javascript of autocomplete is not calling the page at all (tried in debug) and its not giving me error message either... Help Please!!

EDIT : I am still having error "ASP.NET Ajax client-side framework failed to load."

<script src="/ScriptResource.axd?d=dRAn80ZulnXIbHUFZAi0thqEaFFdeMlwAh6uA_ciIINTs7jTUe13ADvaDyjOl6tPSr-1TN4Bqt6MFVjznyiXABGNxDhFk5_-02EGxOku0B-Tim4ebG59zhvC6DdsHV11uoIY024U1o0IMngrTBO45x9tPeG-PiyEUPEypUFf795T-3SY0&amp;t=ffffffffb868b5f4" type="text/javascript"></script>
<script type="text/javascript">
<!--
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.'); 

Upon typing in the textbox, I get the pop up error :

Ajax error: researcher_list.asmx/FetchResList : error : undefined : Internal Server Error : 500

EDITED CODE :

Aspx Code :

$(function() {
    $('input:text').autocomplete({
        source: function(request, response) {
            var pString = '{ "resName": "' + request.term + '" }';
            $.ajax({
                url: "researcher_list.asmx/FetchResList", /* same root as the page? */
                data: pString,
                dataType: "jsond",
                type: "POST",
                contentType: "application/json", /* simplify */
                converters: {/* avoid the d or no d issue, works with 3.5 or prior this way */
                    "json jsond": function(msg) {
                        return msg.hasOwnProperty('d') ? msg.d : msg;
                    }
                },
                success: function(data) {/* assumes data always returned and it IS called item in the JSON */
                    response($.map(data, function(item) {
                        return {
                            value: item.name,
                            label: item.name
                        }
                    }))
                },
                error: function(xhr, textStatus, errorThrown) {
                    var errorMessage = "Ajax error: " + this.url + " : " + textStatus + " : " + errorThrown + " : " + xhr.statusText + " : " + xhr.status;

                    if (xhr.status != "0" || errorThrown != "abort") {
                        alert(errorMessage);
                    }
                }
            });
        },
        minLength: 2
    });
});

Asmx Code :

[WebService(Namespace = "http://localhost/v2/pages/main.aspx")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 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 researcher_list : System.Web.Services.WebService
{
    [WebMethod]
    public List<DBResearcher.Summary> FetchResList(string resName)
    {
        //SqlConnection connection;
        //SqlCommand command = null;
        //SqlDataReader myReader = null;
        //string sql;
        //StringBuilder sb = new StringBuilder();
        var tempSum = new DBResearcher();
        var allRes = DBResearcher.GetAllResearcher()
                        .Where(m => m.name.ToLower().Contains(resName.ToLower()));
        return allRes.ToList();
    }

    public static string[] GetCustomerNames()
    {
        string[] data = new string[] { "Andrew", "Ramona", "Russ", "Russell",  Raymond" };

        return data;

    }
}

web.config file :

<httpHandlers>
  <!-- AJAX.Net Configuration -->
  <add verb="GET,POST" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
  <remove verb="*" path="*.asmx"/>
  <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  <add verb="GET,HEAD" path="ScriptResource.axd" validate="false" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</httpHandlers>

<!-- HTTP MODULES -->

 <httpModules>
  <!-- doesn't work if we restrict it by <location path=...> for some reason,
            so we have no choice but to do this at the root level. -->
  <!--<add name="HttpUploadModule" type="AssistedSolutions.SlickUpload.HttpUploadModule, AssistedSolutions.SlickUpload" />
    -->
  <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

 </httpModules>

EDIT - Error while running asmx page on its own

Stack Trace:

[HttpException (0x80004005): Failed to Execute URL.]
   System.Web.Hosting.ISAPIWorkerRequestInProcForIIS6.BeginExecuteUrl(String url, String method, String childHeaders, Boolean sendHeaders, Boolean addUserIndo, IntPtr token, String name, String authType, Byte[] entity, AsyncCallback cb, Object state) +2008569
   System.Web.HttpResponse.BeginExecuteUrlForEntireResponse(String pathOverride, NameValueCollection requestHeaders, AsyncCallback cb, Object state) +393
   System.Web.DefaultHttpHandler.BeginProcessRequest(HttpContext context, AsyncCallback callback, Object state) +220
   System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +8699714
   System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +155

Answer 1

My answer is built based on an asp.net 3.5 solution and jQuery 1.7.1 version assumption. Much has been already covered by other posters. Yours may vary by version. This is simply an attempt to put comments in an answer with a completed script and server side notes.

Have you decorated your class thus:

[WebService(Namespace = "http://mysite.com/researcher_list/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
[ScriptService]
public class researcher_list : WebService
{

Decorate your method: (use the EnableSession IF you need that...)

[WebMethod(EnableSession = true)]
public List<DBResearcher.Summary> FetchResList(string resName)        {  

cleanup of the client script:

$('input:text').autocomplete({
    source: function(request, response) {
        var pString = '{ "resName": "' + request.term + '" }';
        $.ajax({
            url: "researcher_list.asmx/FetchResList",
            /* same root as the page? */
            data: pString,
            dataType: "jsond",
            type: "POST",
            contentType: "application/json",
            /* simplify */
            converters: { /* avoid the d or no d issue, works with 3.5 or prior this way */
                "json jsond": function(msg) {
                    return msg.hasOwnProperty('d') ? msg.d : msg;
                }
            },
            success: function(data) { /* assumes data always returned and it IS called item in the JSON */
                response($.map(data, function(item) {
                    return {
                        value: item.name,
                        label: item.name
                    };
                }));
            },
            minLength: 2,
            error: function(xhr, textStatus, errorThrown) {
                var errorMessage = "Ajax error: " + this.url + " : " + textStatus + " : " + errorThrown + " : " + xhr.statusText + " : " + xhr.status;
                if (xhr.status != "0" || errorThrown != "abort") {
                    alert(errorMessage);
                }
            }
        });
    }
});

IN ADDITION to the above, there are Web.config settings in asp.net that need set to get a web service to function - assumption here is you have done the research and have that working. IF NOT, suggestion is create a simple method that returns the current time as a string with NO parameters (data:"{}",) and get that via ajax to ensure it works before the complexity of the autocomplete is layered.

Answer 2

Try marking your method with a WebMethod attribute like this:

[WebMethod]
public static List<DBResearcher.Summary> FetchResList(string mail)
{
...
}

Also, your parameters will need to match, so change resName to mail.

You can also merge your jQuery each into the autocomplete selector:

$('input:text').autocomplete(...)

Edit:

Try this code:

$('input:text').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "researcher_list.asmx/FetchResList",
            data: "{ 'resName': '" + request.term + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        value: item.name
                    }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    }, minLength: 2
});