Json自动完成从json列出所有元素
在我自动完成的脚本中,我设置了一个json文件:
脚本
$("#tags").autocomplete({ source: function(request, response) { $.ajax({ url: "test.json", dataType: "json", data: { term: request.term }, success: function(data) { response($.map(data, function(item) { return { label: item.name_test }; })); } }); } });
HTML
JSON文件
[{ "id_test": "7", "name_test": "Tejido", "price": "65" }, { "id_test": "8", "name_test": "Semen", "price": "120" }, { "id_test": "6", "name_test": "Saliva", "price": "20" }, { "id_test": "2", "name_test": "Analisis urinario", "price": "150" }, { "id_test": "3", "name_test": "Analisis sanguineo", "price": "1502" }, { "id_test": "4", "name_test": "Analisis fecal", "price": "20" }]
但是当我在输入中键入名称时,会列出所有元素。
我的错误是什么?
当您使用远程源时,您的代码正在使用,您必须在服务器端或从ajax调用的success
回调中过滤结果。 在您的情况下,您可以使用以下内容:
... success: function (data) { var tag_val = $("#tags").val(); response($.map(data, function (item) { //filtering results.... if (item.name_test.indexOf(tag_val) != -1) { return { label: item.name_test }; } })); }
使用URL参数时,自动完成插件将显示服务器返回的所有建议而不进行过滤(它假定服务器负责返回与?term=xyz
参数匹配的建议)。
如果JSON文件是静态文件,则应在页面加载时下载,处理它并将其用作source
参数:
var source = ["Hold them horses!"]; $.ajax({ url: "test.json", dataType: "json", success: function(data) { source = $.map(data, funciton(item) { return { label: item.name_test, value: item.name_test }; }); } }); $("#tags").autocomplete({ source: source });