AutoComplete jQuery Using JSON data

user_1159056 0
Viewed 54963

Imagine a json file with the following data:

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

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" />

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

EDIT: 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"
}]

and this HTML:

<input type="text" id="name" />
<input type="text" id="value" />

and this jQuery:

$(document).ready(function(){
    $("#name").autocomplete({
        source: "json.php",
        select: function (event, ui) {
            $("#name").val(ui.label);
            $("#value").val(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: 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" />

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]
^ I select       ^ updates the
  a label           value next to it
[input.name] [input.value]
^ this stays intact ^

jquery-ui-autocomplete jquery-ui jquery json ajax
4 Answers
$(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
                        });
                    });
            });
user_120298790
Related