undefined error at calling wcf service from jquery ajax

Question

I'm trying to call WCF service from jquery ajax and i got undefined error only..Help me to solve this please.My Service works well but my problem is in calling WCF from ajax.My code is here

$('#customerName').autocomplete({
                    source: function (request, response) {
                        var param ={email:$('#customerName').val()};
                        $.ajax({
                            url: "http://localhost:53925/Service1.svc/Getusermail/" + $('#customerName').valueOf(),
                            data:"{}",
                            dataType: "json", 
                            type: "GET",

                            processData: true,
                            async:false,
                            contentType: "application/json; charset=utf-8",
                            error: function (XMLHttpRequest, textStatus, errorThrown)
                            {
                                var err = eval("(" + XMLHttpRequest.responseText + ")");
                                alert(err);
                                 //console.log(err.Message);  
                            },
                            success: function (data)
                            {
                                alert("correct code");
                                //response(data.d);
                            }
                        });
                    },
                    minLength: 1 //This is the Char length of inputTextBox  
                });
            });

I've added Required congiuration in web.config of WCF too..Thanks in Advance.And My service code is here

public List<string> Getusermail(string email)
    {
        List<string> emailid = new List<string>();
        string query = string.Format("SELECT email FROM nciuser WHERE email LIKE '%{0}%'", email);
        //Note: you can configure Connection string in web.config also.
        using (SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=mbci;Integrated Security=True"))
        {
            using (SqlCommand cmd = new SqlCommand(query, con))
            {
                con.Open();
                SqlDataReader reader = cmd.ExecuteReader();
                while (reader.Read())
                {
                    emailid.Add(reader.GetString(0));
                }
            }
        }
        return emailid;
    }

And Interface for the above method is

 [OperationContract(Name = "Getusermail")]
    [WebGet(UriTemplate = "Getusermail/{email}", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)]
    List<string> Getusermail(string email);

Answer 1

I used this code @Markus and it is running now

  $(function () {
               $('#customerName').autocomplete({
                    source: function (request, response) {
                        var param =$("#customerName").val();
                        $.ajax({
                            url: "http://10.10.4.86:66/MBCI_Services/Service1.svc/Getusermail/" + $('#customerName').val(),
                            data:'',
                            dataType: "json", 
                            type: "GET",
                            crossDomain:true,
                            processData: true,
                            async:false,
                            contentType: "application/json",

                            error: function (xhr, ajaxOptions, thrownError)
                            {
                                alert(thrownError);
                               // console.log(thrownError);
                            },

                            success: function (data)
                            {

                                response($.map(data, function (item) {
                                    return {
                                        value: item
                                    }

                                }))
                                //alert("work aaitu");
                            }
                            //+ $('#customerName').val()
                        });
                    },
                    minLength: 1 
                });
            });

Answer 2

Several errors in your code:

1. $('#customerName').valueOf() does not return the value of the text-box. You should use $('#customerName').val() for that.

   Better yet: The Auto-complete widget supplies the value in the request argument. Use request.term instead of reading it from the element directly.

2. Remove data:"{}". Since this is a GET request, jQuery will add the data to the end of the URL: /Service1.svc/Getuseremail/test?{}.

3. Depending on the configuration and version, the WCF runtime will return an object either with or without the d property. To play safe, you can use response(data.d || data). This will pick the d property if it exists, otherwise use the full object.

$('#customerName').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Service1.svc/Getusermail/" + request.term,
            dataType: "json", 
            type: "GET",

            processData: true,
            async: false,
            contentType: "application/json; charset=utf-8",
            error: function (xhr, textStatus, errorThrown) {
                console.log(xhr.responseText);  
            },
            success: function (data) {
                response(data.d || data);
            }
        });
    },
    minLength: 1 //This is the Char length of inputTextBox  
});