使用来自外部 JSON 的 JQuery 的自动完成表单字段不起作用答案

【问题标题】：Autocomplete form field with JQuery from external JSON not working使用来自外部 JSON 的 JQuery 的自动完成表单字段不起作用
【发布时间】：2021-01-19 14:33:28
【问题描述】：

我的复杂表单的第一步是使用位于 json 中的一些外部数据自动完成字段。我尝试并遵循了多个示例和文档，但我无法使其工作......

对于这个外部 json：

[
  {
    "Nombre": "Adoración Pérez",
    "DNI": "23123",
    "Telefono": ""
  },
  {
    "Nombre": "Adriana Suárez",
    "DNI": "345345435",
    "Telefono": ""
  },
  {
    "Nombre": "Agueda Delmiro",
    "DNI": "6u56u6tJ",
    "Telefono": 12312434
  },
  {
    "Nombre": "Aida Aguilera",
    "DNI": "46456456A",
    "Telefono": 13123213
  },
  {
    "Nombre": "Aladino Valdés",
    "DNI": "67867845eG",
    "Telefono": ""
  },
  {
    "Nombre": "Alberto Martinez",
    "DNI": "235436456",
    "Telefono": ""
  }
]

这是我的完整 JS：

$(function() {

    var entries = []

    $.getJSON('pacientes.json', function(json) {
        for (var key in json) {
            if (json.hasOwnProperty(key)) {
                var item = json[key];
                entries.push(item);
            }
        }

        console.log(entries)

        $("#species").autocomplete({
            minLength: 0,
            source: entries,
            focus: function(event, ui) {
                $("#species").val(ui.item.Nombre);
                return false;
            },
            select: function(event, ui) {
                $("#species").val(ui.item.Nombre);
                $( "#identifiant" ).val( ui.item.DNI );

                return false;
            }
        })
    });


});

这是我的完整 HTML：

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  <label for="species">Species: </label>
  <input id="species">
  <label for="identifiant">Identifiant: </label>
  <input id="identifiant" style="width: 6em;">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

<script src="js/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/parse_data.js"></script>


</body>
</html>

我尝试了几个不同的选项，但无法自动完成数据。非常感谢！

【问题讨论】：

您是否使用工具来确定问题是 http 请求还是自动完成 api？浏览器控制台中是否有错误？如有错误请分享。如果有错误，请粘贴错误文本并包含与堆栈跟踪相关的代码。
控制台中没有显示错误...
您的条目与正确的格式不匹配。它必须包含具有标签和值属性的对象数组：[ { label: "Choice1", value: "value1" }, ... ]

标签： javascript jquery jquery-ui autocomplete

【解决方案1】：

考虑以下示例。

$(function() {
  // Load entries once
  var entries = [];
  $.getJSON('pacientes.json', function(json) {
    $.each(function(key, val) {
      if (json.hasOwnProperty(key)) {
        entries.push(json);
      }
    });

    // Initialize Autocomplete
    $("#species").autocomplete({
      minLength: 0,
      source: function(req, resp) {
        var myData = [];
        $.each(entries, function(key, val) {
          if (val.Nombre.indexOf(req.term) == 0) {
            myData.push({
              label: val.Nombre,
              value: val.DNI,
              Nombre: val.Nombre,
              DNI: val.DNI,
              Telefono: val.Telefono
            });
          }
          console.log(myData);
          resp(myData);
        });
      },
      focus: function(event, ui) {
        $("#species").val(ui.item.Nombre);
        return false;
      },
      select: function(event, ui) {
        $("#species").val(ui.item.Nombre);
        $("#identifiant").val(ui.item.DNI);
        return false;
      }
    });
  });
});

<h2>HTML Forms</h2>

<form action="/action_page.php">
  <label for="species">Species: </label>
  <input id="species" type="text" />
  <label for="identifiant">Identifiant: </label>
  <input id="identifiant" type="text" style="width: 6em;" />
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

<script src="js/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/parse_data.js"></script>

这将允许您配置自定义数据并仍然根据需要格式化数组。

参考：https://api.jqueryui.com/autocomplete/#option-source

您也可以使用$.ui.autocomplete.filter()。

var myData = [];
$.each(entries, function(key, val) {
  myData.push({
    label: val.Nombre,
    value: val.DNI,
    Nombre: val.Nombre,
    DNI: val.DNI,
    Telefono: val.Telefono
  });
  console.log(myData);
  resp($.ui.autocomplete.filter(myData, req.term));
});

【讨论】：