Jquery ui 自动完成 - 建议使用外部 json答案

【问题标题】：Jquery ui autocomplete - suggest with external jsonJquery ui 自动完成 - 建议使用外部 json
【发布时间】：2017-02-08 02:16:59
【问题描述】：

我正在使用 jquery ui 自动完成功能。

我的问题是当我使用对外部 json 的调用时，建议功能停止工作。

$(document).ready(function() {
  $('.comu').autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "https://raw.githubusercontent.com/edusl/test/master/municipios1.json",
        dataType: "json",
        success: response
      });
    },
    minLength: 0,
    autoFocus: true,
    select: function(event, ui) {
      event.preventDefault();
      $(".comu").val(ui.item.label);
    },
  });
});

我的代码示例：codepen

提前致谢！

【问题讨论】：

欢迎来到 Stack Overflow。我注意到的第一件事是你没有将任何data 传递给你的url，那么你期望得到什么？

标签： jquery-ui autocomplete

【解决方案1】：

我怀疑你已经找到了回答这个问题的人。但这里有一个解决方案。

$(document).ready(function() {
  $('.comu').autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "https://raw.githubusercontent.com/edusl/test/master/municipios1.json",
        dataType: "json",
        success: function(jData) {
          var results = [];
          $.each(jData, function(ind, val) {
            if (val.label.toLowerCase().indexOf(request.term) === 0) {
              results.push(val);
            }
          });
          response(results);
        }
      });
    },
    minLength: 0,
    autoFocus: true,
    select: function(event, ui) {
      event.preventDefault();
      $(".comu").val(ui.item.label);
    },
  });
});

工作示例：https://jsfiddle.net/Twisty/mL3h8pm0/

AJAX 请求将只返回所有结果，这就是您传递给response 的内容。因此，如果您在将其传递给 response 之前不对其进行过滤，您将始终得到一个完整的列表。

这会使用indexOf() 过滤列表，但您可以使用任何您喜欢的方法。

这是另一个可以减少 HTTP 开销的解决方案：

var m = [];
$(document).ready(function() {
  $.getJSON("https://raw.githubusercontent.com/edusl/test/master/municipios1.json", function(result) {
    $.each(result, function(ind, val) {
      m.push(val);
    });
  });

  $('.comu').autocomplete({
    source: m,
    minLength: 0,
    autoFocus: true,
    select: function(event, ui) {
      event.preventDefault();
      $(".comu").val(ui.item.label);
    },
  });
});

工作示例：https://jsfiddle.net/Twisty/mL3h8pm0/2/

这会一次性获取所有数据并填充一个数组。然后，自动完成功能可以像平常一样使用它。

【讨论】：