使用JSON格式的AJAX调用自动完成问题

Question

我正在尝试使用AJAX调用来调用JSON数据，如下所示在我的输入文件中使用自动完成...

但是它没有返回/建议任何值..当我调试它时也会进入sucessmodule ..

$(document).ready(function () {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }
$( "#city" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
         'async': false, 
                'global': false, 
      url: "webservice?$top=10&$format=json",
      dataType: "json",
      data: {
        featureClass: "P",
        style: "full",
        maxRows: 12,
        term: request.term
      },
      success: function( data ) {

        response( $.each( data, function(i, results ) {
          return {
            label: results.CITY,
            value: results.CITY
          }
        }));
      },
    });
  },
  minLength: 2,
  select: function( event, ui ) {
    log( ui.item ?
      "Selected: " + ui.item.label :
      "Nothing selected, input was " + this.value);
  }, 
  open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
  },
  close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
  }
});

从AJAX调用返回的数据采用以下格式：

{"d":{"results":[{"__metadata": {"uri":"webservice('9424951638763661')","type":"arn.app.WebContent.data.LOCType"},"GID":"942495163876361","USER":"ARN","CITY":"Los Angels","},{"__metadata": {"uri":"webservice('9424951638763662')","type":"arn.app.WebContent.data.LOCType"},"GID":"942495163876362","USER":"ARN","CITY":"San Diago"}]}}

有人可以建议上面的代码有什么问题。

Answer 1

jsFiddle Demo

注意：我使用的json变量包含您不需要此部分的转义字符串或$.parseJSON函数的

<强> JS：

var json = "{\"d\":{\"results\":[{\"__metadata\": {\"uri\":\"webservice(\'9424951638763661\')\",\"type\":\"arn.app.WebContent.data.LOCType\"},\"GID\":\"942495163876361\",\"USER\":\"ARN\",\"CITY\":\"Los Angels\"},{\"__metadata\": {\"uri\":\"webservice(\'9424951638763662\')\",\"type\":\"arn.app.WebContent.data.LOCType\"},\"GID\":\"942495163876362\",\"USER\":\"ARN\",\"CITY\":\"San Diago\"}]}}";

var result = $.parseJSON(json);

$.each(result.d.results, function(i, results ) {
    alert(results.CITY);
});

---

问题

您的数据与您选择的数据不同

更改：

response( $.each( data, function(i, results ) {

要

response( $.each( data.d.results, function(i, results ) {

说明

这是因为ASP.NET的JSON结果始终包含.d。然后你包含了一个results元素。这将使您进入阵列，并允许您$.each。

---

jsFiddle AutoComplete Demo

var json = "{\"d\":{\"results\":[{\"__metadata\": {\"uri\":\"webservice(\'9424951638763661\')\",\"type\":\"arn.app.WebContent.data.LOCType\"},\"GID\":\"942495163876361\",\"USER\":\"ARN\",\"CITY\":\"Los Angels\"},{\"__metadata\": {\"uri\":\"webservice(\'9424951638763662\')\",\"type\":\"arn.app.WebContent.data.LOCType\"},\"GID\":\"942495163876362\",\"USER\":\"ARN\",\"CITY\":\"San Diago\"}]}}";

var result = $.parseJSON(json);
var autocompleteArray = [];
$.each(result.d.results, function(i, results ) {
    autocompleteArray.push(results.CITY);
});

$( "#tags" ).autocomplete({
    source: autocompleteArray
});

---

jsFiddle Example For you

var json = "{\"d\":{\"results\":[{\"__metadata\": {\"uri\":\"webservice(\'9424951638763661\')\",\"type\":\"arn.app.WebContent.data.LOCType\"},\"GID\":\"942495163876361\",\"USER\":\"ARN\",\"CITY\":\"Los Angels\"},{\"__metadata\": {\"uri\":\"webservice(\'9424951638763662\')\",\"type\":\"arn.app.WebContent.data.LOCType\"},\"GID\":\"942495163876362\",\"USER\":\"ARN\",\"CITY\":\"San Diago\"}]}}";

var result = $.parseJSON(json);
var autocompleteArray = [];
$.each(result.d.results, function(i, results ) {
    autocompleteArray.push(results.CITY);
});
$( "#tags" ).autocomplete({
    source: function( request, response ) {
        $.ajax({
            'async': false, 
            'global': false, 
            url: "webservice?$top=10&$format=json",
            dataType: "json",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                term: request.term
            },
            success: function( data ) {
                response( $.each( data.d.results, function(i, results ) {
                    return {
                        label: results.CITY,
                        value: results.GID
                    }
                }));
            },
        });
    },
    minLength: 2,
    select: function( event, ui ) {
        log( ui.item ?
            "Selected: " + ui.item.label :
            "Nothing selected, input was " + this.value);
    }, 
    open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
    },
    close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
    }
});