gpt4 book ai didi

jquery - 使用 JSON 数据自动完成 jQuery

转载 作者:行者123 更新时间:2023-12-03 22:44:32 26 4
gpt4 key购买 nike

想象一个包含以下数据的 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 具有 color 值,input.value 具有 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.labelui.value 变量,它会显示“未定义”。我错过了什么?

编辑2:假设我有这个 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

[输入名称] [输入值]
^ 我选择       ^ 更新
旁边的标签           值
[输入名称] [输入值]
^ 这保持不变 ^

最佳答案

使用远程数据源:

$("#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?term=xyz

如果您可以控制服务器端代码,则可以将返回的数据更改为如下所示:

[
{
label: "red",
value: "#f00"
}, /* etc */
]

您可以简单地使用一个字符串,即服务器端资源的名称作为:

$("#selector").autocomplete({
source: "my_server_side_resource.php",
select: /* same as above */
});

查看 remote with JSONP example使用服务器端资源的完整示例。

编辑:请参阅此示例以了解使用本地数据的工作演示:http://jsfiddle.net/SMxY6/

关于jquery - 使用 JSON 数据自动完成 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11532202/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com