Question

我有一个自动填充框（如下所示），其源代码为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);
    }
});

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

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

请帮我解决这个问题。如果我需要提供更多细节，请跟我说。

Answer 1

将您的来源设置为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);
}
});

Answer 2

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

＆＃13;

$( 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);
      }
    } );
} );

＆＃13;

<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>

＆＃13;

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

2 个答案: