jQuery autocomplete: Display certain objects differently?

I'm running a ruby on rails app, and I'm using jQuery to show some autocomplete suggestions in a form. The autocomplete suggestions are sourced from 2 different arrays which I merge into one, and then display.

Now, the issue is that I need to display results from one file in a different manner than results from another. How do I do this? That is, they will all be in the same autocomplete box, but the results from one may have a different font, color, etc. (a separate CSS hook?)

autocomplete.js:

$(function() {
  $('.autocomplete_field').autocomplete({
  source: '/locations/autocomplete.js'
  });
});

locations_controller.rb:

  def autocomplete
    respond_to do |format|
      format.js do
        client = GooglePlacesAutocomplete::Client.new(:api_key => "mykey")
        locations = client.autocomplete(:input => params[:term], :lat => "x", :lng => "y", :radius => "25000")
        add = Location.all.map { |l| { :label => l.address, :value => l.address } }
        locations = locations.predictions.map { |l| {:label => l.description, :value => l.description} }
        final = add + locations
        render :json => final
      end
    end
  end

As you can see, the locations_controller simply renders a JSON object which is the two concatenated arrays to the URL /locations/autocomplete.js, which the autocomplete.js renders.

I realize I may need to modify my controller to return 2 separate JSON objects, one for add, and one for location. I can do this, but I do not know how to merge them together in the final autocomplete, and how to format the queries from them differently.

I'm very inexperienced in javascript/jquery, so I'd appreciate an answer which explains those components well, even if you gloss over the required changes to the Rails app.

This is what it boils down to:

When I view the HTML for the autocomplete box, each autocomplete item is as follows:

<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1">(autocomplete suggestion)</a>
</li>

I simply need to add an additional class besides "ui-menu-item" and "ui-corner-all" to the results obtained from one JSON, which will not be present in the results obtained from the other.

Now, I see here that its possible to add an additional class by modifying the .renderItem function, but how do I do apply this to every element in a certain JSON object (js approach), or apply this to every element in a ruby array beforehand (through rails)?

You're correct about having to use the _renderItem function. With this method you can apply any class you want to the li or underlying a as long as you include the data that the widget expects.

I would simply send down another variable from your ruby code (sorry, not versed in ruby at all) that designates whether this is an address or not (or whatever property you want to branch on to change the formatting).

Then, you would write the _renderItem function like this:

$("#auto").autocomplete({
    source: source
}).data("autocomplete")._renderItem = function(ul, item) {
    var listItem = $("<li></li>")
        .data("item.autocomplete", item)
        .addClass(item.isAddress ? "address" : "landmark");

    if (item.isAddress) {
        listItem.html("<a>" + $.map(item.label.split(","), function(el) {
            return "<span class='addressline'>" + el + "</span>";
        }).join('') + "</a>");
    } else {
        listItem.html("<a>" + item.label + "</a>");
    }

    return listItem.appendTo(ul);

};

Assuming you're passing down an isAddress value for those objects in your array that are an address. Keep in mind that you can pass down any data you want as long as the widget has a label or value field (or both).

Here's a more complete example with a local data source: http://jsfiddle.net/andrewwhitaker/tW5zE/