使用JSON数据自动完成jQuery

一尘不染

使用JSON数据自动完成jQuery

ajax

想象一个具有以下数据的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的选择器。

编辑： 我有此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变量，它会显示“未定义”。我想念什么？

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旁边的标签？

[input.name] [input.value]
^我选择^更新其
旁边的标签值
[input.name] [input.value]
^这保持不变^

阅读 222

2020-07-26

共1个答案

一尘不染

使用远程数据源：

$("#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 */
]

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

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

查看带有JSONP的远程示例，以获取使用服务器端资源的完整示例。

编辑： 有关使用本地数据的有效演示，请参见以下示例：http :
//jsfiddle.net/SMxY6/

2020-07-26