jQueryUI AutoComplete does not render result to inputbox

Trying to implement a simple search for Windows user account with JQueryUI.

Requirement User enters first or last name to a HTML <input> control and that should return all the possible match of Full Name with (usernames) for that search item. Although server returns result as below :

Problem: The<input>box shows the search term and a "white" dropdown with no options are displayed.

JQuery code:

                        $(document).ready(function () {
                        $("#nameSearch").autocomplete({
                            source: function (request, response) {
                                $.ajax({
                                    type: "POST",
                                    contentType: "application/json; charset=utf-8",
                                    url: "Search.aspx/GetUserDetails",
                                    data: "{'username':'" + request.term + "'}",
                                    dataType: "json",
                                    async: true,
                                    success: function (data) {
                                        response($.map(data, function (item) {
                                            return {
                                                value: item.username
                                            }
                                        }));

                                    },
                                    error: function (xhr, textStatus, errorThrown) {
                                        var errorMessage = "Ajax error: " + this.url + " textStatus: " + textStatus + " errorThrown: " + errorThrown + "  xhr.statusText: " + xhr.statusText + " xhr.status: " + xhr.status;
                                        alert(errorMessage);
                                        if (xhr.status != "0" || errorThrown != "abort") {
                                            alert(xhr.responseText);
                                        }
                                    }
                                });
                            }
                        });
                    });

Code behind

[WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static Person[] GetUserDetails(string username)
    {
        List<Person> allUsers = new List<Person>();

        PrincipalContext ctx = new PrincipalContext(ContextType.Domain, "abcd",
        "dc=abcdH,dc=com");

        UserPrincipal qbeUser = new UserPrincipal(ctx);

        qbeUser.GivenName = username;

        PrincipalSearcher srch = new PrincipalSearcher(qbeUser);
        foreach (var found in srch.FindAll())
        {
            Person user = new Person();
            user.userDetails = found.DisplayName + " (" + found.SamAccountName + ")";
            allUsers.Add(user);
        }
        qbeUser = null;
        qbeUser = new UserPrincipal(ctx);

        qbeUser.Surname = username;

        PrincipalSearcher srch1 = new PrincipalSearcher(qbeUser);
        foreach (var found in srch1.FindAll())
        {
            Person user = new Person();
            user.userDetails = found.DisplayName + " (" + found.SamAccountName + ")";
            allUsers.Add(user);
        }
        qbeUser = null;
        qbeUser = new UserPrincipal(ctx);

        qbeUser.SamAccountName = username;

        PrincipalSearcher srch2 = new PrincipalSearcher(qbeUser);
        foreach (var found in srch2.FindAll())
        {
            Person user = new Person();
            user.userDetails = found.DisplayName + " (" + found.SamAccountName + ")";
            allUsers.Add(user);
        }

        //allUsers.Sort();
        return allUsers.ToArray();


    }
    public class Person
    {
        public string userDetails { get; set; }
    }

I must be doing something wrong here which I can't spot straightaway. Tried lots of different snippet from SO answers but didn't fit to my problem.