jQuery 自动完成：预缓存查询以提高性能？答案

【问题标题】：jQuery autocomplete: pre-cache query to increase performance?jQuery 自动完成：预缓存查询以提高性能？
【发布时间】：2013-04-03 15:23:50
【问题描述】：

我有一个 jQuery 自动完成字段，当用户开始在字段中输入城市名称时，它会查找城市名称和相应的 ZIP（美国邮政编码）。

MySQL 数据库包含大约 44,000 行美国邮政编码。选择所有城市名称和邮政编码时，查询本身会快速运行（0.0002 秒）。

“预缓存”所有结果（SELECT place_name, postal_code FROM postal_codes WHERE country_code = 'US'）是否有任何好处，以便自动完成功能更快地加载用户？

编辑：整个 JSON 列表为 600KB，并在 2-3 秒内加载到浏览器中（根据 Google Chrome 控制台）

当前代码：

<script type="text/javascript">
$(function() {

$('#from_country').change(function(){
  var val = this.value;
  $("#from_zip").autocomplete({
    source: "json-list-live-production.php?country=" + val,
    minLength: 4,
  });
}).change()


$('#del_country').change(function(){
  var val = this.value;
  $("#del_zip").autocomplete({
    source: "json-list-live-production.php?country=" + val,
    minLength: 4,
  });
}).change()


});
</script>

<input type="text" class="input_text" name="from_zip" id="from_zip"  />

<input type="text" name="del_zip" id="del_zip"  />

【问题讨论】：

你可以预先缓存它，但你必须与带宽抗衡。完整的列表会很大。正如您所说的那样，“预缓存”只有在将整个列表传输到客户端时才真正有意义，而不是按需进行查找。如果用户必须等待 10 秒才能下载整个列表，那比没有缓存还要糟糕。（即除非您的列表很小，否则可能没有意义）
看jQuery Autocomplete's Remote Caching demo

标签： mysql json jquery-ui

【解决方案1】：

看起来使用 GeoNames.org 网络服务 + jQuery Autocomplete 来查找邮政编码是最快的方法。

$( "#from_zip" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "http://ws.geonames.org/postalCodeSearchJSON",
      dataType: "jsonp",
      data: {
        featureClass: "P",
        style: "full",
        maxRows: 50,
        placename_startsWith: request.term,
        country: "US"
      },
      success: function( data ) {
        response( $.map( data.postalCodes, function( item ) {
          return {
            label: item.placeName + (item.adminCode1 ? ", " + item.adminCode1 : "") + " (" + item.postalCode + ")",
            value: item.postalCode
          }
        }));
      }
    });
  },
  minLength: 2,
    messages: {
        noResults: null,
        results: function() {}
    },

});

【讨论】：