jQuery ajax自动完成没有映射

时间:2015-12-14 03:44:37

标签: javascript jquery json ajax

我需要将这个json数组映射到文本框并使用自动填充进行填充,下面是我相信正在运行的代码,fiddler返回良好的结果也在控制台浏览器上没有错误

编辑:我在控制台中出错:

  

未捕获的TypeError:无法读取属性'长度'未定义的

的jQuery

$(document).ready(function () {
    $(function () {
        $("#destinationhotelcity").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "http://engine.hotellook.com/api/v2/lookup.json",
                    dataType: "json",
                    data: {
                        query: request.term, // input field value
                        lang: "en",
                        lookFor: "both",
                        limit: 10,
                    },
                    success: function (data) {
                        response($.map(data.hotels, function (item) {
                            return {
                                label: item.label + ', ' + item.locationName,
                                value: item.label + ', ' + item.locationName,
                                code: item.id
                            }
                        }));
                    }
                });
            },
            select: function (event, ui) {
                $("#destinationhotelcity").val(ui.item.value);
            },
            change: function (event, ui) {
                if (!ui.item) {
                    $("#destinationhotelcity").val("");
                }
            },
            onclick: function (event, ui) {
                $("#destinationhotelcity").val("");
            }
        });
    });
});

示例JSON数据

{
  "status": "ok",
  "results": {
    "hotels": [
      {
        "location": {
          "lon": 120.094396,
          "lat": 29.325235
        },
        "label": "Byland Star Hotel",
        "_score": 144247,
        "fullName": "Byland Star Hotel, Yiwu, China",
        "locationId": 25142,
        "id": "153465",
        "locationName": "Yiwu, China"
      },
      {
        "location": {
          "lon": 2.822413,
          "lat": 41.982377
        },
        "label": "Peninsular",
        "_score": 140926,
        "fullName": "Peninsular, Girona, Spain",
        "locationId": 3505,
        "id": "287519",
        "locationName": "Girona, Spain"
      },
      {
        "location": {
          "lon": 121.025466,
          "lat": 14.554966
        },
        "label": "The Peninsula Manila",
        "_score": 131960,
        "fullName": "The Peninsula Manila, Makati City, Philippines",
        "locationId": 24539,
        "id": "389082",
        "locationName": "Makati City, Philippines"
      },
      {
        "location": {
          "lon": 116.416382,
          "lat": 39.915437
        },
        "label": "The Peninsula Beijing",
        "_score": 129755,
        "fullName": "The Peninsula Beijing, Beijing, China",
        "locationId": 6679,
        "id": "10782",
        "locationName": "Beijing, China"
      },
      {
        "location": {
          "lon": 100.510923,
          "lat": 13.723085
        },
        "label": "The Peninsula Bangkok",
        "_score": 128178,
        "fullName": "The Peninsula Bangkok, Bangkok, Thailand",
        "locationId": 25949,
        "id": "20028",
        "locationName": "Bangkok, Thailand"
      },
      {
        "location": {
          "lon": 121.489021,
          "lat": 31.240765
        },
        "label": "The Peninsula Shanghai",
        "_score": 120824,
        "fullName": "The Peninsula Shanghai, Shanghai, China",
        "locationId": 6680,
        "id": "19937",
        "locationName": "Shanghai, China"
      },
      {
        "location": {
          "lon": 139.760374,
          "lat": 35.674786
        },
        "label": "The Peninsula Tokyo",
        "_score": 105459,
        "fullName": "The Peninsula Tokyo, Tokyo, Japan",
        "locationId": 25666,
        "id": "19960",
        "locationName": "Tokyo, Japan"
      },
      {
        "location": {
          "lon": 25.020123,
          "lat": 35.414669
        },
        "label": "Peninsula Resort & Spa",
        "_score": 103874,
        "fullName": "Peninsula Resort & Spa, Agia Pelagia, Greece",
        "locationId": 23282,
        "id": "315527",
        "locationName": "Agia Pelagia, Greece"
      },
      {
        "location": {
          "lon": -73.975325,
          "lat": 40.76168
        },
        "label": "The Peninsula New York",
        "_score": 97931,
        "fullName": "The Peninsula New York, New York City, New York, United States",
        "locationId": 20857,
        "id": "19944",
        "locationName": "New York City, New York, United States"
      },
      {
        "location": {
          "lon": 2.172499,
          "lat": 41.379624
        },
        "label": "Hotel Peninsular",
        "_score": 97678,
        "fullName": "Hotel Peninsular, Barcelona, Spain",
        "locationId": 3196,
        "id": "292590",
        "locationName": "Barcelona, Spain"
      }
    ],
    "locations": [

    ]
  }
}

1 个答案:

答案 0 :(得分:1)

response($.map(data.hotels, function (item) {

应该是:

response($.map(data.results.hotels, function (item) {