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

我有一个自动完成框（如下），其源代码为PHP文件。带有URL的JQuery自动完成功能（提供JSON）

$("#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}

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

来源

2017-09-12 Nidhin

请点击此页面https://jqueryui.com/autocomplete/#multiple-remote的“查看源文件”关于 – adiga

感谢您的答复Adiga，我有已经经历了很多帖子，我的理解是我需要使用一些Ajax函数来完成它。我尝试了一些Ajax功能，但它没有帮助。我没有得到我期待的内容。我需要 – Nidhin

抱歉错误的链接。检查此链接https://jqueryui.com/autocomplete/#remote – adiga

添加标签属性的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>

来源

2017-09-12 13:44:44 maxuville

我真的很感谢你的努力。不幸的是，它不适用于我的数据结构。请找到我的JSON结构。 – Nidhin

{“currentCulture”：null，“airports”：[{“code”：“BCN”，“name”：“El Prat Airport”}， {“code”：“CDG”，“name” Charles De Gaulle“}，{”code“：”ORY“，”name“：”Paris- Orly“}]，”destinations“：null} – Nidhin

我编辑了答案，让您的json作为数据源。 – maxuville

设置你的源作为的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); 
} 
});

来源

2017-09-12 07:44:09 Thanga

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

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

回答

相关问题