访问jQuery自动完成的对象

时间:2015-10-13 12:24:00

标签: jquery json autocomplete

这是我使用的JSON的一小部分(具有相同的结构)..所以我需要从GOD和LEG获取所有船名并在JQuery自动完成时使用它们

{
  "GOD": {
  "name": "This is a test",
  "code": "GOD",
        "ships": [
            {
                "layout": "normal",
                "type": "Destroyer",
                "name": "Ship George"
            },
            {
                "layout": "normal",
                "type": "Airship",
                "name": "The strong one"
            }
        ]
    },
    "LEG": {
        "name": "Limited God",
        "code": "LEG",
        "ships": [
            {
                "layout": "normal",
                "type": "bad",
                "name": "Blair witch"
            },
            {
                "layout": "normal",
                "type": "the worst",
                "name": "New era"
            }
        ]
    }
}

问题是我想在自动完成中仅显示“船只”名称。 我用于自动完成的代码是:

$("#autocomplete").autocomplete({
    source: function (request, response) {
        $.ajax({
            dataType: "json",
            data: {
                term: request.term,
            },
            type: 'Get',
            contentType: 'application/json; charset=utf-8',
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            cache: true,
            url: 'all.json',
            success: function (data) {
                var array = $.map(data, function (set) {
                    return {
                        label: set.name,
                        value: set.name
                    }
                });

                //call the filter here
                response($.ui.autocomplete.filter(array, request.term));
            },
            error: function (data) {
            }
        });
    },
    minLength: 2,
    open: function () { },
    close: function () { },
    focus: function (event, ui) { },
    select: function (event, ui) {
        $( "#card" ).val( ui.item.label );
        //$( "#description" ).html( ui.item.text );
        $( "#multiverseid" ).val( ui.item.multi );
        $( "#project-icon" ).attr( "src", "http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=" + ui.item.multi + "&type=card" );
    }
});

使用上面的代码,我得到自动完成值:GOD和LEG

如果我将行更改为:

var array = $.map(data.GOD.ships, function (set) {

然后我得到所有专门为神的船

我需要的是获得自动填充建议,包括GOD和LEG的所有船名(以及其他“GODS”和“LEGS”)

1 个答案:

答案 0 :(得分:1)

成功可能是这样的:

  var array = $.map(data.GOD.ships, function (set) {
                        return {
                            label: set.name,
                            value: set.name
                        }
                    });
                 var   array1 = $.map(data.LEG.ships, function (set) {
                        return {
                            label: set.name,
                            value: set.name
                        }
                    });
              var outputArray = $.merge(array, array1);                
             console.log(outputArray)
            //call the filter here
            response($.ui.autocomplete.filter(outputArray, request.term));
        },
        error: function (data) {
        }

编辑1:

var keys = Object.getOwnPropertyNames ( data )
var outputArray;

$.each(keys,function(ele, val){

    var array = $.map(data[val].ships, function (set) {
                        return {
                            label: set.name,
                            value: set.name
                        }
                    });     
      if(ele == 0)
           outputArray = $.merge([], array);
      else{
           outputArray = $.merge(outputArray, array);
       }  
});
response($.ui.autocomplete.filter(outputArray, request.term));
},
error: function (data) {
}

编辑2:

var keys = Object.getOwnPropertyNames ( data )
var outputArray;

$.each(keys,function(ele, val){

    var array = $.map(data[val].ships, function (set) {
                        return {
                          label: set.name + "(" +keys[ele] + ")",
                        value: set.name + "(" +keys[ele] + ")"
                        }
                    });     
      if(ele == 0)
           outputArray = $.merge([], array);
      else{
           outputArray = $.merge(outputArray, array);
       }  
});
response($.ui.autocomplete.filter(outputArray, request.term));
},
error: function (data) {
}