How do I return arbitrary JSON objects to a jQuery Autocomplete list?

Question

jQuery part:

I have a jQuery UI 1.8 Autocomplete form that fetches remote JSON data from a Rails controller.

$('input#test').autocomplete({
    source: function( request, response ) {
      $.getJSON(
        "<%= find_stuff_url(:format => :json) %>",
        request,
        function(data){
          console.log(data);
          function(data) {
            $.map(data, function(item) {
            return {
              "label" : item.control_point.label,
              "value" : item.control_point.geonames_uri
            }
            });
        });
    },
    minLength: 2,
    select: function( event, ui ) {
        // ...
    }
  });

… what I get returned:

This Rails controller just returns an array of Objects (actually, ActiveRecord instances), serialized into JSON. I would like to use this data to populate the Autocomplete list. Right now, what I receive is an array of serialized ActiveRecord objects – for example one of these objects could be:

Object
  control_point: Object
    geonames_uri: "http://sws.geonames.org/5128581/"
    label: "New York (US)"
    lat: "40.7142691"
    lng: "-74.0059729"
    map_id: 1
    name: "New York City"

What I need:

However, jQuery Autocomplete probably wants a JSON array of objects that carry id and label to populate its list — yet I don't have these. This is what the documentation says:

A response callback, which expects a single argument to contain the data to suggest to the user. This data […] can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties).

I don't quite understand what's meant by "String-Array or Object-Array with label/value/both" properties.

In this example, my output would be a list of those control_point Objects, shown like:

label: "New York (US)", value: <the geonames_uri>
label: "New York (Somewhere else)", value: <another geonames_uri>
…

I tried to adapt the code from the documentation using $.map, but it doesn't seem to work (i.e. the autocomplete shows nothing).

How do I pass an arbitrary JSON object to jQuery Autocomplete, so it shows a list of results? More explicitly: What do I have to put in function(data){}?

Erm, what values do you want to be autocompleted? you don't just pass a whole block of different kind of values to it.. Is it the label? is it the name? — dvir
– dvir, Commented Oct 16, 2011 at 13:17
@DvirAzulay Sorry, had to be more clear: Yes, for example, the label property should be shown to the user, and for example, geonames_uri could be the actual value behind it. — slhck
– slhck, Commented Oct 16, 2011 at 13:22

slhck · Accepted Answer · 2011-10-16 14:01:53Z

5

The documentation (at the same link you posted) explains what is meant by the terms String-Array and Object-Array:

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.

So at the end of the day, it's either a String-Array: ["value1", "value2", ...] or an Object-Array:

[
  { label:"First Value", value:"value1" },
  { label:"Second Value", value:"value2" },
  ...
]

You can choose to either make the required server side changes to serialise the data to look appropriate, or map it client side, as in this example. Either way the end result should be one of the above formats.

So, for example, something like this:

function(data) {
response( $.map(data, function(item) {
  return {
  "label" : item.control_point.label,
  "value" : item.control_point.geonames_uri
  }
}));

edited Oct 16, 2011 at 14:01

slhck

39.6k33 gold badges163 silver badges220 bronze badges

answered Oct 16, 2011 at 13:38

davin

45.6k9 gold badges81 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

slhck Over a year ago

That JSONP example gave me a rough idea, and copy/pasting the JSONP code works. When trying to adapt it (see edited question above), still nothing happens. What could I be missing?

Peter-Paul van Gemerden Over a year ago

@david: That's very true, you could to this client-side. However, there are two good reasons to do it server-side: 1) to keep the amount of data over the line low and 2) to prevent exposing possibly sensitive data (user_id, updated_at, etc).

davin Over a year ago

@slhck, your example isn't correct. Autocomplete gives you a response object you need to call with the data. You're just creating a new function but not calling response with your $.map result.

davin Over a year ago

@PPvG, (2) is presumptuous and seems irrelevant here, and (1) is true although not necessarily the only factor in a decision. You're assuming you know way more than you do (e.g. Cost of changing the server code vs. paying for extra bandwidth). You don't even know if the OP has control over the server-side...

davin Over a year ago

@PPvG, never intended on being rude, my apologies. All I'm saying is those are decisions you cannot make because you aren't privy to the necessary context required to make an informed decision. In particular, if an application is intended for 200 people (say, the staff of a particular department on a local network), then even if you make the word "every" very big and bold (not trying to be rude, saying it with a smile) the difference is a few kB of data every few days. Which brings us back to the point that we aren't in a position to make that decision.

|

Peter-Paul van Gemerden · Accepted Answer · 2011-10-16 13:41:12Z

2

This is something you'll want to do server-side, i.e. in Ruby on Rails. You could to this:

Give your model (ActiveRecord entity, whatever) a method toAutocompleteResult that returns an Object with just the label and value properties.
In your controller (return_stuff_url?), loop through your result set, call toAutocompleteResult() on them and put the results in an Array of sorts.
Convert the Array to JSON and return it.

I'm not a RoR developer, so I can't give you specific code. But this should be pretty easy to do in any OO language.

Edit: by the way, a JSON string array looks like this:

["String 1", "String 2", "String 3"]

And a JSON Object array would look like this:

[
    { "label" : "Label 1", "value": "Value 1" },
    { "label" : "Label 2", "value": "Value 2" }
]

edited Oct 16, 2011 at 13:41

answered Oct 16, 2011 at 13:34

Peter-Paul van Gemerden

7,02933 silver badges37 bronze badges

2 Comments

slhck Over a year ago

Yes, I thought about changing the Rails side. That would have been the path of least resistance. But I'd like to do it in Javascript only, if possible.

Peter-Paul van Gemerden Over a year ago

In that case remapping the data, as @david pointed out, is your way to go.

justingordon · Accepted Answer · 2012-02-09 06:21:43Z

1

You need something like this on the server

def my_autocomplete_controller_method
  q = params[:term]
  records = Record.find_by_whatever q
  records.map { |record| {label: record.your_label, value: record.your_value} }
end

On the client (coffescript):

$find_field.autocomplete
   source: /path_to_controller_method

answered Feb 9, 2012 at 6:21

justingordon

13k13 gold badges79 silver badges117 bronze badges

Collectives™ on Stack Overflow

How do I return arbitrary JSON objects to a jQuery Autocomplete list?

jQuery part:

… what I get returned:

What I need:

3 Answers 3

10 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

jQuery part:

… what I get returned:

What I need:

3 Answers 3

10 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related