CODEWITHSUNDEEP
javascriptjqueryajax
alwaysVBNET
alwaysVBNET

Reputation: 3310

Autocomplete JQuery not displaying results

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?

Upvotes: 0

Views: 622

Answers (3)

AndrewStein
AndrewStein

Reputation: 101

I had this issue and a debugging "alert" similar/identical to the one you have was killing it:

success: function (data) {
alert(data);

Neglected to check whether console.log acts similarly.

Upvotes: 0

Shaun
Shaun

Reputation: 2052

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.

Upvotes: 1

Jorge Mejia
Jorge Mejia

Reputation: 1163

Try this:

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

Upvotes: 0

Related Questions