AutoComplete jQuery使用JSON数据

Posted 2021-03-31

想象一下包含以下数据的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": "Secu00e7u00e3o 1",
    "value": "1"
}, {
    "label": "Secu00e7u00e3o 2",
    "value": "2"
}, {
    "label": "Secu00e7u00e3o 3",
    "value": "3"
}, {
    "label": "Secu00e7u00e3o 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.labeland和ui.value变量，它会显示'undefined'。我错过了什么？

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] ^这保持完整^

答案

使用远程数据源：

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

另一答案

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

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

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

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

另一答案

经过几个小时的工作......终于实现了。事情是我有一个由许多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数组= [{标签：“印度国家银行”，价值：“SBIN00076”}，{标签：“ICICI银行”，价值：“ICIC001”}，..]