如何将 XMLHttpRequest 转换为 JQuery-UI-Autocomplete？

Question

我使用手动 XMLHttpRequest 访问 PHP 文件和数据库。
像这样：

if(window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
        //xmlhttp.responseText
        //Porcess on Response Text
        }
}
xmlhttp.open("GET", "PHP_Code/MyAjax.php?page=page_id", true);
xmlhttp.send();

现在我想使用JQuery-UI-Autocomplete-Ajax。
这是 JQuery-UI 自动完成文档：

$(function() {
    var availableTags = [
      "ActionScript",
      "C++",
      "ColdFusion",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

我想传递 url PHP_Code/MyAjax.php?page=page_id 而不是 availableTags 变量。
请在 JQuery 中提供一些发送请求和接收响应的正确方法。

Answer 1

source 属性也可以取 url。刚刚

https://jqueryui.com/autocomplete/#remote

$( "#birds" ).autocomplete({
  source: "search.php",
  minLength: 2,
  select: function( event, ui ) {
    log( ui.item ?
      "Selected: " + ui.item.value + " aka " + ui.item.id :
      "Nothing selected, input was " + this.value );
  }
});

您的 URL 需要以特定方式回应（来自 http://api.jqueryui.com/autocomplete/#option-source 的文档）：

String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.

或者您可以让 jQuery UI 自动完成使用您的格式化数据：

https://jqueryui.com/autocomplete/#custom-data

如何将 XMLHttpRequest 转换为 JQuery-UI-Autocomplete？

How to convert XMLHttpRequest into JQuery-UI-Autocomplete?

javascript

ajax

jquery

jquery-ui

jquery-ui-autocomplete