【问题标题】:Using JSON-Object in jqueryUI autocomplete在 jqueryUI 自动完成中使用 JSON-Object
【发布时间】:2015-11-23 16:50:58
【问题描述】:

我正在从外部域加载 JSON 数组。我已经让它正常工作,但我仍然在实际显示任何结果时遇到问题。 使用示例和其他问题/答案,我试图显示显然正在生成的结果,但以未捕获的错误结束:

未捕获的类型错误:无法读取未定义的属性“标签”

代码sn-p:

$('#citySearchBox').autocomplete({
      source: function(request, response){
          $.ajax({
              url: "/api.php",
              data: {action: "search", input: request.term},
              dataType: "jsonp"
          });
          response(function(data){
              return $.parseJSON(data);
          });
      },
      minLength: 3
  });

在调试器中看到的服务器响应:

[{"id":"1.3.0.0.0.0","label":"柏林 (10115)","value":"index.php?action=city&city=1.3.0.0.0.0"}, 等...]

如您所见,我尝试使用所示方法将字符串解析为 JS 对象,还尝试了JSON.parse(data)

如果我在“响应”部分之前犯了一个错误,但不知何故设法半途而废,请指出我的错误。

编辑:

我根据 Bradys 的建议更改了代码,但我似乎在语法上做错了,因为在响应函数中放置了一个断点,没有任何停止。

这是更新后的响应函数:

response( function(data){
        var items = data.text().slice(1, -1).split(',');
        for(i=0; i < (items.length - 3); i=i+3)
        {
            items[i] = $.parseJSON(items[i]) + ','
             + $.parseJSON(items[i+1]) + ',' + $.parseJSON(items[i+2]);
        }
        return items;
    });

案例结束,从未真正让 JSONP 工作,但情况发生了变化,不再依赖跨域通信。

对于任何感兴趣的工作代码如下:

  $('#searchBox').autocomplete({
      source: function(request, response){
          $.ajax({
              type: "GET",
              url: "api.php",
              async: true,
              data: {action: "search", input: request.term},
              success: function(data){
                  var items  = $.parseJSON(data);
                  response(items);
              }
          });
      },
      select: function(event, ui){
          $('#searchBox').val(ui.item.value);
          window.location.href = ui.item.url;
      },
      minLength: 2
  });

【问题讨论】:

  • 我认为您需要删除第一行并在data 上运行您的循环。请注意,您在上面粘贴的服务器响应周围没有引号。我相信你有一个纯数组。这可能是因为您使用了jsonp 而不是json。我认为您在这里不需要jsonp,它用于发出跨域请求并为您提供可执行的JavaScript。更多关于正确使用jsonp的细节可以在这个问题上找到:stackoverflow.com/questions/2067472/what-is-jsonp-all-about
  • 感谢您的帮助。在询问时我正在跨域工作,但情况发生了变化,所以我摆脱了 jsonp,现在一切正常......

标签: javascript jquery json jquery-ui


【解决方案1】:

您从服务器获取的不是 JSON 字符串。这是一个数组。 您应该拆分数组并单独解析每个对象。

【讨论】:

  • 感谢您的帮助,我已根据您的建议对代码进行了更改,但在编辑中解释了我的进一步问题。
猜你喜欢
  • 2013-03-08
  • 1970-01-01
  • 2015-07-16
  • 1970-01-01
  • 2014-09-12
  • 1970-01-01
  • 2011-09-27
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多