javascript - Autocomplete JQuery not displaying results

Question

I am trying to display the results on my autocomplete textbox but I'm not sure how to return the results from the ajax call, or I'm not sure why it fails to display them. The data is displayed on my Alert(data) like this:

[{"IssuerID":1,"Name":"tester test","ChequeAccountNumber":"12345678","CurrencyCode":"EUR"},{"IssuerID":3,"Name":"Taryn","ChequeAccountNumber":"1115555","CurrencyCode":"GBP"}]

I believe the problem is on the response($.map(data.d, function (item) block because I'm not sure what values to insert there (id or val or something else), or how to declare the variables. Any ideas?

<script type="text/javascript">
    $(function () {
        $("#tags").autocomplete({
            source: function (request, response) {
                var qstring = '?' + jQuery.param({ 'SearchString': request.term });
                $.ajax({
                    url:'http://localhost/psa/DesktopModules/PsaMain/API/ModuleTask/GetIssuers' + qstring,
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        alert(data);
                        response($.map(data.d, function (item) {
                            return {
                                id: item.issuerid, //here might be the problem
                                val: item.name
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            }
        });
    });
</script>

html:

<div class="ui-widgetx">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

Edit

After I modified my 'success' code, I can see the dropdown menu with empty items:

success: function (result) {
    var parsed = jQuery.parseJSON(result);
    myArray = parsed.map(function (e) {
        return { label: e.Name, value: e.IssuerID };
    });
    response($.map(myArray, function (item) {
        return { label: item.Name, value: item.IssuerID };
    }))
},

Any ideas how to get the correct items on the dropdown list of JQuery from my array?

Answer 1

The jQuery UI Autocomplete widget requires the response to be an array of objects with label and value keys. If that's the autocompleter your using, you'll need to change your map to:

response($.map(data, function(item) {
  return { label: item.Name, value: item.IssuerID }
});

Edit

You can change your edited code to this:

success: function (result) {
    var parsed = jQuery.parseJSON(result);
    var myArray = parsed.map(function (e) {
        return { label: e.Name, value: e.IssuerID };
    });
    response(myArray);
},

You only need to map the parsed JSON once, if you try to map it again the property names will be different, which is why you got an array of empty objects.