想象一个具有以下数据的json文件:
[ { color: "red", value: "#f00" }, { color: "green", value: "#0f0" }, { color: "blue", value: "#00f" }, { color: "cyan", value: "#0ff" } ]
我希望使用jQuery的自动完成方法,能够将 颜色 显示为选项,以选择并在输入上插入 值 。
<input type="text" name="selector" id="selector" /> <input type="text" name="color" id="color" /> <input type="text" name="value" id="value" />
以上不需要介绍。用于选择颜色,input.color具有 颜色 值和input.value具有 值 value的选择器。
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:
<input type="text" id="name" /> <input type="text" id="value" />
而这个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变量,它会显示“未定义”。我想念什么?
ui.label
ui.value
Edit2: 假设我有以下HTML:
<input type="text" class="name" /> <input type="text" class="value" /> <input type="text" class="name" /> <input type="text" class="value" />
是否可以使用同一.autocomplete()方法处理多个选择器?喜欢,使用选择我想要的标签,input.name然后仅更新input.value旁边的标签?
.autocomplete()
input.name
[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资源的请求,如下所示:
$.ajax
my_server_side_resource.php?term = xyz
如果您可以控制服务器端代码,则可以将返回的数据更改为如下所示:
[ { label: "red", value: "#f00" }, /* etc */ ]
您可以简单地使用一个字符串,即服务器端资源的名称作为source:
source
$("#selector").autocomplete({ source: "my_server_side_resource.php", select: /* same as above */ });
查看带有JSONP的远程示例,以获取使用服务器端资源的完整示例。
编辑: 有关使用本地数据的有效演示,请参见以下示例:http : //jsfiddle.net/SMxY6/