2017-01-23 4 views
0

Привет им обычно бэкенд парень не очень знакомы с JQuery, но я хочу, чтобы создать простой пользовательский интерфейс для запроса моей службы API с использованием AJAX автозаполнения, предполагая, что я JSON возвращения, как показано нижеМанипулирование JSON в AJAX автозаполнения

{ addresses": [ 
    { 
     "id": "gmap_auto3961949943bb427782ca7b3d1df6c64f", 
     "name": "819643", 
     "secondary_name": "Singapore", 
     "description": "Singapore 819643", 
     "types": [ 
      "postal_code" 
     ], 
     "attributes": { 
      "latitude": 1.355322, 
      "longitude": 103.988337 
     } 
    }, 
    { 
     "id": "gmap_autoc98babeabdf77fd2788871786fed14ef", 
     "name": "819663", 
     "secondary_name": "Singapore", 
     "description": "Singapore 819663", 
     "types": [ 
      "postal_code" 
     ], 
     "attributes": { 
      "latitude": 1.356716, 
      "longitude": 103.98651 
     } 
    }, 
] 
} 

Так что я намерен взять имя & вторичное имя в качестве метки и идентификатора в качестве значения. Как мне это сделать? Ниже мой AJAX

$(function() { 
    function log(message) { 
     $("<div>").text(message).prependTo("#log"); 
     $("#log").scrollTop(0); 
    } 

    $("#address").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: "/address/autocomplete", 
       data: { 
        q: request.term, 
        countryCode: "sg" 
       }, 
       success: function(data) { 
        var ParsedObject = $.parseJSON(data); 
        response($.map(ParsedObject.addresses, function (item) { 
         return { 
          label: item.name, 
          value: item.secondary_name 
         }; 

        })) 
       } 
      }); 
     }, 

     minLength: 2, 
     select: function(event, ui) { 
      log("Selected: " + ui.item.name + ", " + ui.item.secondary_name); 
     } 
    }); 
}); 

Заранее спасибо

ответ

1

В вашем success обратного вызова

success: function(data) { 
    var ParsedObject = $.parseJSON(data); 
    response($.map(ParsedObject.addresses, function (item) { 
     return { 
      label: item.name + ":" + item.secondary_name, //any delimiter to separate name and secondary name 
      value: item.id //taking id from result 
     }; 
    })) 
} 

В вашем select обратного вызова

select: function(event, ui) { //on selection of autocomplete dropdown 
    console.log("Selected: " + ui.item.label + ", " + ui.item.value); //prints Selected: name:secondary_name, id 
    //you can do whatever you want with label and value here 
} 
+0

ничего не отображается на автозаполнения выпадающего списка, что я упускаю ? –

+0

Можете ли вы записать данные 'ParsedObject'. И любые ошибки в консоли? –

+0

Ooo есть ошибка SyntaxError: JSON.parse: неожиданный символ в строке 1 столбец 2 данных JSON ummm, если я правильно проверяю мой json из валидатора –

Смежные вопросы