如何使用 jQuery.get & jQuery.Autocomplete 導入 JSON 數據

Question

我找到了一個提供所有世界國家和城市的資源，但即使它已在 Github 上發布，我也從未找到任何有關它的教程或主題。

https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json

現在我正在嘗試使用 jQuery 和自動完成功能搜索國家和城市，請查看我的代碼，看看為什么它不能正常工作？！

https://codepen.io/ali-ramadhan/pen/ExwmMjJ

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<label for="state">Country/City:</label>
<input id="state" name="state" />

<script>
$("#state").autocomplete({
  source: function (request, response) {
    $.getJSON(
      "https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json",
      {
        query: request.term
      },
      response
    );
  }
});
</script>

Answer 1

您的請求基於 static 數據，響應的結構非常復雜。 如果您只查找國家/地區名稱，請考慮以下內容。

 $(function() { $("#state").autocomplete({ source: function(request, response) { $.getJSON( "https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json", function(myData) { response($.ui.autocomplete.filter(Object.keys(myData), request.term)); } ); } }); })

 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <label for="country">Country:</label> <input id="country" name="country" />

你可以參考這個Demo： https://jqueryui.com/autocomplete/#multiple

當用戶輸入國家名稱時，會發出數據請求。 由於我們不能要求 API 對數據執行一些操作，它只是一個 static JSON 文件，我們必須在它到達后過濾。 由於我們只是在尋找國家，我們可以從數據的頂層獲取鍵名。 有一個自動完成過濾器實用程序可以幫助我們將結果過濾到單個數據數組中，然后將其傳遞回response function。

在我看來，這是為每個請求傳遞的大量數據。 我建議盡可能緩存 JSON 數據以幫助減少呼叫。 如果您同時需要 Country 和 City 組合，我懷疑您將需要更多數據。 您可以將搜索拆分為兩個字段，或者構建一個使用父/子關系的新數據集。

以下是允許用戶按城市搜索的更復雜的方法。 緩存搜索以幫助減少對 JSON 數據的調用。

 $(function() { $.widget("custom.catcomplete", $.ui.autocomplete, { _create: function() { this._super(); this.widget().menu("option", "items", ">:not(.ui-autocomplete-category)"); }, _renderMenu: function(ul, items) { var that = this, currentCategory = ""; $.each(items, function(index, item) { var li; if (item.category.= currentCategory) { ul.append("<li class='ui-autocomplete-category'>" + item;category + "</li>"). currentCategory = item;category. } li = that,_renderItemData(ul; item). if (item.category) { li,attr("aria-label". item:category + ". " + item;label); } }); } }); function formatData(data) { var format = []. $,each(data, function(country. cities) { $,each(cities, function(index. city) { format:push({ label, city: category; country }); }); }); return format; } var cache = {}. $("#state"):catcomplete({ delay, 0: minLength, 3: source, function(req. resp) { var term = req;term; if (term in cache) { resp(cache[term]); return. } $:getJSON( "https.//raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities,json"; function(results) { var fData = formatData(results). var result = $.ui.autocomplete,filter(fData; term); cache[term] = result; resp(result); }), }: select, function(event. ui) { $(this).val(ui.item.category + "/" + ui.item;label); return false; } }); });

 .ui-autocomplete-category { font-weight: bold; padding: .2em.4em; margin: .8em 0.2em; line-height: 1.5; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <label for="state">Country/City:</label> <input id="state" name="state" />

參考：

• https://jqueryui.com/autocomplete/#categories
• https://jqueryui.com/autocomplete/#custom-data
• https://jqueryui.com/autocomplete/#remote-with-cache