使用来自外部 JSON 的 JQuery 的自动完成表单字段不起作用
Posted
技术标签:
【中文标题】使用来自外部 JSON 的 JQuery 的自动完成表单字段不起作用【英文标题】：Autocomplete form field with JQuery from external JSON not working 【发布时间】：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" , ... ]
【参考方案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));
);
【讨论】：
以上是关于使用来自外部 JSON 的 JQuery 的自动完成表单字段不起作用的主要内容，如果未能解决你的问题，请参考以下文章