自动完成jQuery使用JSON数据
想象一下包含以下数据的json文件：
[ { color: "red", value: "#f00" }, { color: "green", value: "#0f0" }, { color: "blue", value: "#00f" }, { color: "cyan", value: "#0ff" } ] 使用jQuery的自动完成方法，我希望它能够将颜色显示为选项，以便在输入上选择和插入值 。
以上不需要介绍。 选择器用于搜索颜色， input.color用颜色值， input.value用值值。
编辑：我有这个JSON数据：
[{ "label": "Sec\u00e7\u00e3o 1", "value": "1" }, { "label": "Sec\u00e7\u00e3o 2", "value": "2" }, { "label": "Sec\u00e7\u00e3o 3", "value": "3" }, { "label": "Sec\u00e7\u00e3o 4", "value": "4" }]
这个HTML：
这个jQuery：
$(document).ready(function(){ $("#name").autocomplete({ source: "json.php", select: function (event, ui) { $("#name").val(ui.label); $("#value").val(ui.value); } }); });
我按照安德鲁的回答，它提示我选择数据，但如果我提醒ui.label和ui.value变量，它会显示’undefined’。 我错过了什么？
Edit2：假设我有这个HTML：
是否可以使用相同的.autocomplete()方法处理多个选择器？ 比如，使用input.name选择我想要的标签，只更新它旁边的input.value ？
[input.name] [input.value]
^我选择^更新
旁边的标签值
[input.name] [input.value]
^这保持完整^
使用远程数据源：
$("#selector").autocomplete({ source: function (request, response) { $.ajax({ url: "my_server_side_resource.php", type: "GET", data: request, success: function (data) { response($.map(data, function (el) { return { label: el.color, value: el.value }; })); } }); }, select: function (event, ui) { // Prevent value from being put in the input: this.value = ui.item.label; // Set the next input's value to the "value" of the item. $(this).next("input").val(ui.item.value); event.preventDefault(); } });
根据需要调整$.ajax调用。 此示例将生成对您的PHP资源的请求，如下所示：
my_server_side_resource.php？长期= XYZ
如果您可以控制服务器端代码，则可以将返回的数据更改为如下所示：
[ { label: "red", value: "#f00" }, /* etc */ ]
您可以简单地使用字符串，即服务器端资源的名称作为source ：
$("#selector").autocomplete({ source: "my_server_side_resource.php", select: /* same as above */ });
使用服务器端资源查看带有JSONP示例的远程控制器的完整示例。
编辑：有关使用本地数据的工作演示，请参阅此示例： http ： //jsfiddle.net/SMxY6/
您需要更改JSON对象以使用“label”属性。 来自文档：
具有标签和值属性的对象数组：[{label：“Choice1”，value：“value1”}，…]
label属性显示在建议菜单中。 用户从菜单中选择了某些内容后，该值将插入到input元素中。 如果仅指定了一个属性，则它将用于两者，例如。 如果仅提供value-properties，则该值也将用作标签。
然后，您需要在触发“更改”或“选择”事件时设置其他文本字段的值。
经过几个小时的工作……终于实现了。 事情是我有一个由许多json对象组成的json数组。 每个json对象都有银行名称及其ifsc代码。用户需要输入bank并从数据库中过滤掉银行详细信息行。 选择那个银行…我有两个输入字段，一个用于银行，另一个用于ifsc代码。 我选择了银行名称，并显示了相应的ifsc代码。 所以这就是我做到的： –
我的json数组= [{标签：“印度国家银行”，价值：“SBIN00076”}，{标签：“ICICI银行”，价值：“ICIC001”}，..]