6

想象一个包含以下数据的 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带有值的值。

编辑： 我有这个 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]
^ 这保持不变 ^

4

4 回答 4

14

使用远程数据源：

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

于 2012-07-17T23:26:25.627 回答
2

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

具有标签和值属性的对象数组：[ { label: "Choice1", value: "value1" }, ... ]

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

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

于 2012-07-17T23:30:21.980 回答
1 
$(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
                        });
                    });
            });
于 2019-09-06T10:07:41.157 回答
0

经过几个小时的工作..终于实现了。事情是我有一个由许多 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”}，..]

于 2018-02-28T08:39:47.093 回答