使用 JSON 数据自动完成 jQuery

Question

想象一个包含以下数据的 json 文件：

[
    {
        color: "red",
        value: "#f00"
    },
    {
        color: "green",
        value: "#0f0"
    },
    {
        color: "blue",
        value: "#00f"
    },
    {
        color: "cyan",
        value: "#0ff"
    }
]

使用 jQuery 的自动完成方法，我希望它能够显示 color 作为在输入中选择和插入 value 的选项。

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

我按照 Andrew 的回答提示我选择数据，但如果我提醒 ui.label 和 ui.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？

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

Answer 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 */
});

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

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

Answer 2

您需要更改 JSON 对象以使用“标签”属性。来自文档：

具有标签和值属性的对象数组： [ { 标签：“Choice1”，值：“value1”}，...]

标签属性显示在建议菜单中。该值将 在用户选择某些内容后插入到输入元素中 从菜单中。如果只指定一个属性，它将用于 两者，例如。如果您仅提供值属性，则该值也将是 用作标签。

然后，您需要在触发“更改”或“选择”事件时设置其他文本字段的值。

Answer 3

$(function() {
            $("#subject_name").autocomplete({
                    source: function(request, response) {
                        $.ajax({
                            url: "api/listBasicsubject",
                            dataType: "json",
                            type: "POST",
                            data: {
                                subject_name: request.term,

                            },
                            success: function(data) {
                                response($.map(data.data, function(item) {
                                        return {
                                            label: item.subject_name,
                                            value: item.subject_name

                                        }
                                    });
                                }


                            },
                            autoFocus: true,
                            minLength: 1
                        });
                    });
            });

Answer 4

经过几个小时的工作.. 终于实现了。事情是我有一个由许多 json 对象组成的 json 数组。每个 json 对象都有银行名称及其 ifsc 代码。用户需要键入银行并从数据库中过滤掉银行详细信息行。选择该银行后...我有 2 个输入字段，一个用于银行，另一个用于 ifsc 代码。 我选择银行名称并显示相应的 ifsc 代码。所以我就是这样做的：-

---

<script type="text/javascript">
$(function() {





    $("#newBeneBankName").autocomplete({

        source: function(request, response) {

            $.ajax({
                url: "getBankDetailsIFSCJson",
                type: "GET",
                data: {
                    term: request.term
                },
                dataType: "json",
                success: function (data) {
                    response($.map(data, function (el) {
                        return {
                            label: el.label,
                            value: el.value
                        };
                    }));
                }
            });
        }, //newBeneBankName addBeneIfscCode
        focus: function (event, ui) {
            event.preventDefault();
            $("#newBeneBankName").val(ui.item.label);
        },
        select: function (event, ui) {
            event.preventDefault();
            $("#addBeneIfscCode").val(ui.item.value);
            $("#newBeneBankName").val(ui.item.label);
        }

});
});

---

我的 json 数组= [ { 标签：“印度国家银行”， 值：“SBIN00076” }, { 标签：“ICICI银行”， 值：“ICIC001” },.. ]