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 });