Question

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

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

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

<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带有值值。

修改我有这个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]
^这保持不变^

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？术语= 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对象以使用“label”属性。来自文档：

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

标签属性显示在建议菜单中。价值会   在用户选择了某些内容后插入到input元素中   从菜单中。如果只指定了一个属性，则将使用它   两者，例如。如果您只提供value-properties，那么该值也将是   用作标签。

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

Answer 3

经过几个小时的工作......终于实现了。事情是我有一个由许多json对象组成的json数组。每个json对象都有银行名称及其ifsc代码。用户需要输入bank并从数据库中过滤掉银行详细信息行。选择那个银行...我有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数组= [{ 标签：＆＃34;印度国家银行＆＃34;，值：＆＃34; SBIN00076＆＃34; }， { 标签：＆＃34; ICICI Bank＆＃34;，值：＆＃34; ICIC001＆＃34; } ... ]

Answer 4

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

AutoComplete jQuery使用JSON数据

4 个答案: