Geek asks and answers

JQuery Autocomplete Using JSON Data

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 color as parameters for selecting and pasting an input value.

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

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

The above does not require an introduction. A selector for finding colors, input.colorwith a color value and input.valuewith a value.

EDIT: I have 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 he offers me to select the data, but if I warn the variables ui.labeland ui.value, he 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" />

.autocomplete()? , , input.name, input.value ?

[input.name] [input.value]
^       ^
           
[input.name] [input.value]
^ ^

+5
4

:

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

+13

JSON, label. :

:     [{label: "Choice1", value: "value1" },...]

label . , - . , , . -, .

"" "".

+1

.. - . , 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);
        }

});
});

my json array = [{label: "state bank of India", Value: "SBIN00076"}, {label: "ICICI Bank", Value: "ICIC001"}, ..]

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

More articles:


All Articles