CODEWITHSUNDEEP
javascriptjqueryjsonjquery-uiautocomplete
Majid
Majid

Reputation: 14253

How to access returned JSON's values on auto complete selection?

I have this JSON format returned by server by some keyword typed in text box:

[{"id":1,"value":"some string!"}]

and I want when user selected an item, browser navigate to another page using selection's id; which exists in returned JSON. this is my auto complete code:

$(function () {

$("#search-box").autocomplete({
    source: function (request, response) {
        $.ajax({
            type: "GET",
            url: "../Contenthandler/Search.ashx",
            dataType: "json",
            data: 'query=' + request.term,
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.value };
                })
       );

            }
        });
    },
    minLength: 3,
    open: function () {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function () {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    },
    select: function (event, ui) {
        if (ui.item) {
            window.location.href = "../ControlPanel.aspx?id=" + ui.item.id;
        }
    }
 });

});

but ui.item.id is undefined. How can I access id(1) on selection event?

Upvotes: 0

Views: 921

Answers (1)

charlietfl
charlietfl

Reputation: 171689

You don't have id as property of objects you mapped to the array passed to autocomplete within your ajax success.

Your objects only have one property label. Add the other properties you need or just extend your response objects with the label property

 response($.map(data, function (item) {
       return { label: item.value, id : item.id };// add "id" property
  });

Actually if the data returned from server is the structure at top of question...you don't need to do any mapping. You really don't need your own ajax either and can wire the server path directly to the plugin.

See demos and docs for setting url path as source

Upvotes: 1

Related Questions