如何使用 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

您的请求基于静态数据，响应的结构非常复杂。如果您只查找国家/地区名称，请考虑以下内容。

$(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 对数据执行一些操作，它只是一个静态 JSON 文件，我们必须在它到达后进行过滤。由于我们只是在寻找国家，我们可以从数据的顶层获取键名。有一个自动完成过滤器实用程序可以帮助我们将结果过滤成单个数据数组，然后传回response 函数。

在我看来，这是为每个请求传递的大量数据。我建议尽可能缓存 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