带有 URL 的 JQuery 自动完成（提供 JSON）答案

【问题标题】：JQuery Autocomplete with URL(Provides JSON)带有 URL 的 JQuery 自动完成（提供 JSON）
【发布时间】：2026-01-11 04:10:01
【问题描述】：

我有一个自动完成框（如下），其源代码为 PHP 文件。

$("#autocompleteFrom").autocomplete({
    source: "../wp-content/plugins/plugin-search/js/GetCountry.php",
    select: function(event, ui) {
        $("#autocompleteFromHidden").val(ui.item.code);
        $("#autocompleteNameFromHidden").val(ui.item.name);
    }
});

现在我想将自动完成的来源更改为返回 JSON 格式的位置列表的 URL，如下所示。

{"currentCulture":null,"airports":[{"code":"BCN","name":"El Prat Airport"},
{"code":"CDG","name":"Paris-Charles De Gaulle"},{"code":"ORY","name":"Paris-
Orly"}],"destinations":null}

请帮助我。如果我需要提供更多详细信息，请告诉我。

【问题讨论】：

点击本页“查看源码”jqueryui.com/autocomplete/#multiple-remote
感谢 Adiga 的回复，我已经浏览了很多帖子，我知道我需要使用一些 Ajax 函数来完成它。我尝试了一些 Ajax 功能，但没有帮助。我没有得到我想要的东西。我需要
抱歉链接错误。检查此链接jqueryui.com/autocomplete/#remote
我试过这样。来源：函数（请求，响应）{ $.ajax（{ url：“http://***.azurewebsites.net/api/destinations?culturecode=en-GB”，数据：{查询：request.term}，成功：函数（数据）{ var 转换 = $.map（数据，函数（el）{ 返回 { 标签：el.phrase，id：el.id }；}）；响应（转换）；}，}）； }

标签： javascript jquery json autocomplete

【解决方案1】：

向 JSON 项目添加标签属性可能会解决您的问题。看看这是否有帮助：

$( function() { 
    $( "#autocompleteFrom" ).autocomplete({
      source: function( request, response ) {
      var search_data = [];
        var data = {"currentCulture":null,"airports":[{"code":"BCN","name":"El Prat Airport"},
{"code":"CDG","name":"Paris-Charles De Gaulle"},{"code":"ORY","name":"Paris-Orly"}],"destinations":null};

          data.airports.map(function(item){
             item.label = item.name;
             search_data.push(item);
          });
          
          response(search_data);
      },
      minLength: 2,
      select: function( event, ui ) {
        $("#autocompleteFromHidden").val(ui.item.code);
        $("#autocompleteNameFromHidden").val(ui.item.name);
      }
    } );
} );

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="Countries">Countries: </label>
  <input id="autocompleteFrom">
</div>
 
  Result:
  <div class="ui-widget">
  <input type="text" id="autocompleteFromHidden" class="ui-widget-content"/>
  <input type="text" id="autocompleteNameFromHidden" class="ui-widget-content"/>
  </div>

【讨论】：

非常感谢您的努力。不幸的是，它在我的数据结构中不起作用。请找到我的 JSON 结构。
{"currentCulture":null,"airports":[{"code":"BCN","name":"El Prat Airport"}, {"code":"CDG"," name":"Paris-Charles De Gaulle"},{"code":"ORY","name":"Paris-Orly"}],"destinations":null}
我已经编辑了答案，将您的 json 作为数据源。
这真是太棒了 maxuville。出于我的学习目的，如果您能解释一下这两个步骤，那就太好了。 data.airports.map(function(item){ item.label = item.name; search_data.push(item); 我正在执行以下步骤。$(value.destinations).each(function(index, value) { 控制台。 log(index); console.log(value); if ((value.name.toLowerCase()).indexOf(request.term.toLowerCase()) != -1) { console.log(value); search_data.push (value.name); } }) 在此步骤中，我稍后无法访问“代码”和“名称”属性。请告诉我区别。
airports 对象是包含您需要的所有数据的数组。因此，我在 airports 对象的每个项目中添加了标签成员，并将其复制到一个新对象中。新对象现在具有用于搜索的所有数据，也用于显示在其他两个输入上，这是由“选择”选项完成的。

【解决方案2】：

将您的来源设置为 serviceUrl，如下所示

$("#autocompleteFrom").autocomplete({
serviceUrl: "../wp-content/plugins/plugin-search/js/GetCountry.php",
onSelect: function(ui) {
    $("#autocompleteFromHidden").val(ui.item.code);
    $("#autocompleteNameFromHidden").val(ui.item.name);
}
});

【讨论】：

感谢您的回复，但这并没有帮助。如问题中所述，URL 以 JSON 格式保存数据。