0

https://en.wikipedia.org/w/api.php?action=opensearch&search=a&limit=10&namespace=0&format=json

上面的网页返回一个带有嵌套数组的 json 数组。我只想要第二个带有标题的嵌套数组。我如何将它与 jquery ui 自动完成功能一起使用，以便我只能将它与标题数组一起使用。

4

1 回答 1

2

这是一个基本的例子。这是基于自动完成 | 远程 JSONP 数据源示例。

工作示例：https ://jsfiddle.net/Twisty/t3ahcdht/

HTML

<label for="wiki">Wiki:</label>
<input id="wiki">
<button>Go</button>

JavaScript

$(function() {
  $("#wiki").autocomplete({
    minLength: 1,
    source: function(req, resp) {
      $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&search=" + req.term + "&limit=10&namespace=0&format=json&callback=?", function(json) {
        console.log(json);
        resp(json[1]);
      })
    }
  });
});

这有助于解决 CORS 的问题。来自https://en.wikipedia.org/wiki/Same-origin_policy，

在计算中，同源策略是 Web 应用安全模型中的一个重要概念。根据该政策，网络浏览器允许包含在第一个网页中的脚本访问第二个网页中的数据，但前提是两个网页具有相同的来源。源定义为 URI 方案、主机名和端口号的组合。此策略可防止一个页面上的恶意脚本通过该页面的文档对象模型访问另一个网页上的敏感数据。

和...

跨域资源共享

放宽同源策略的第二种技术被标准化为跨源资源共享。该标准使用新的 Origin 请求标头和新的 Access-Control-Allow-Origin 响应标头扩展了 HTTP。它允许服务器使用标头明确列出可能请求文件的来源或使用通配符并允许任何站点请求文件。Firefox 3.5、Safari 4 和 Internet Explorer 10 等浏览器使用此标头允许带有 XMLHttpRequest 的跨域 HTTP 请求，否则同源策略会禁止这些请求。

这将允许我们GET使用用户输入的搜索词从 API 中获取结果，并在自动完成中显示结果。响应速度会有所不同。

于 2017-06-12T18:33:42.883 回答