CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-autocomplete
Azure
Azure

Reputation: 85

Jquery UI autocomplete: both labels and values are behaving like values

I'm working with Jquery UI's autocomplete.

The problem I'm having is this: when I work witih an external data source, both label and value behave like values.

In other words, when I reference an external data source, with a single label and value pair, both the label and value appear in the dropdown together, as two choices.

In other words, they both appear as values, instead of appearing as label and value.

When you click on any one of them, the alert alert(ui.item.label); shows its value, whether its a label, or a value.

I can't see why the label and value are both behaving like values, especially since i've clearly marked it in the json source.

the problem does not occur with a local data source, but only with an external one.

Here's the local code:

<script>
    $(document).ready(function() {
        $("#inputbox").autocomplete({
            source: "sd/aa.php",
            minLength: 3,
            select: function(event, ui) {
                alert(ui.item.label);
                alert(ui.item.value);
            }
        });
    });
</script>

<input id="inputbox" />

Upvotes: 1

Views: 1666

Answers (1)

Justin
Justin

Reputation: 3397

The Why...maybe

When using jQuery Autocomplete, it expects a specific properties for the label and value when using complex objects.

For example, an object that has custom properties, we will say Id and Description, Autocomplete will look for a label and value property. If you only define a label OR value property, it will use that property for both the label and value displayed.

The external service should return an object that looks like so:

[{
    //Your custom properties
    id: 78923,
    description: 'A very nice widget',
    //Below are autocomplete specific properties
    label: 'Nice Widget A',
    value: '$19.99'
}]

Possible solutions

  1. The first way to get this to work is to adjust your service to add a label and value property to the json returned to the client.

  2. The second way, if you don't have control over the service, is to make an AJAX call instead and in the success event function, you can manually map the results and extend the objects with the new properties.

    ...
source: function (request, response) {
    $.ajax({
        url: "/my/service?term=" + escape(request.term),
        type: "GET",
        contentType: "application/json",
        dataType: "json",
        success: function (data) {
            var mappedResults = $.map(data, function (item) {
                //Extend the service data with a label and value property that autocomplete uses
                return $.extend(item, { label: item.description, value: item.id });
            });

            response(mappedResults);
        }
    });
}
...

This is also useful if you wish to use the other values provided by the service for something else. These can be accessed through any of the events of the Autocomplete function in the form of ui.item.[yourProperty]. So if I gave a callback to the select event of the Autocomplete widget, I could access the description via ui.item.description.

Upvotes: 6

Related Questions