自动完成的jQuery使用JSON数据 [英] AutoComplete jQuery Using JSON data

问题描述

考虑具有以下数据的JSON文件：

Imagine a json file with the following data:

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

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

Using jQuery's autocomplete method, I want it to be able to display the color as options to select and insert value on a input.

<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 与值的值。

The above doesn't need introductions. Selector for the search on the colors, input.color with color value and input.value with value value.

编辑： 我有这样的JSON数据：

I have this JSON data:

[{
    "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的：

and this 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 变量，它说未定义。我在想什么？

I followed Andrew's answer and it prompts me to select the data, but if I alert ui.labeland ui.value variables, it says 'undefined'. What am I missing?

EDIT2： 比方说，我有这样的HTML：

Let's say I have this 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 旁边？

Is it possible to handle multiple selectors with the same .autocomplete() method? Like, select the label I want using the input.name and only update the input.value next to it?

[input.name] [input.value]
^我选择＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP; ^更新
＆NBSP;＆NBSP;标签＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;价值旁边
[input.name] [input.value]
^这个保持不变^

[input.name] [input.value]
^ I select       ^ updates the
  a label           value next to it
[input.name] [input.value]
^ this stays intact ^

推荐答案

使用远程数据源：

$("#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").value(ui.item.value);
        event.preventDefault();
    }
});

根据需要

扭捏的 $。阿贾克斯通话。这个例子将产生像这样的请求到PHP资源：

Tweak the $.ajax call as needed. This example will generate requests to your PHP resource that look like this:

my_server_side_resource.php？长期= XYZ

my_server_side_resource.php?term=xyz

如果你对自己的服务器端code控制，你可以更改所返回看起来像这样的数据：

If you have control over your server-side code, you could change the data that's returned to look like this:

[
    {
        label: "red",
        value: "#f00"
    }, /* etc */
]

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

You can simply use a string, the name of your server-side resource as the source:

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

查看使用服务器 - 在与JSONP例如的一个完整的例子端资源。

Check out the remote with JSONP example for a full example using a server-side resource.

编辑：查看本例中使用本地数据的工作演示：的http：//的jsfiddle .NET / SMxY6 /

See this example for a working demo using local data: http://jsfiddle.net/SMxY6/

这篇关于自动完成的jQuery使用JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！