如何在 wikimedia opensearch api 中使用 jquery ui 自动完成功能？

Question

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

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

Answer 1

这是一个基本示例。这是基于 Autocomplete | Remote JSONP Datasource 示例。

工作示例：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、

In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.

还有...

Cross-Origin Resource Sharing

The second technique for relaxing the same-origin policy is standardized under the name Cross-Origin Resource Sharing. This standard extends HTTP with a new Origin request header and a new Access-Control-Allow-Origin response header. It allows servers to use a header to explicitly list origins that may request a file or to use a wildcard and allow a file to be requested by any site. Browsers such as Firefox 3.5, Safari 4 and Internet Explorer 10 use this header to allow the cross-origin HTTP requests with XMLHttpRequest that would otherwise have been forbidden by the same-origin policy.

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

如何在 wikimedia opensearch api 中使用 jquery ui 自动完成功能？

how to use a jquery ui autocomplete function with wikimedia opensearch api?

javascript

jquery-ui

wikimedia