jQuery autocomplete: Display certain objects differently?

Question

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)?

Andrew Whitaker · Accepted Answer · 2011-08-11 11:31:21Z

1

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/

answered Aug 11, 2011 at 11:31

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

2 Comments

ankit Over a year ago

Sorry, I don't know much JS at all. Where would I define the isAddress? function in the JS, and how do I make it return true if an element is in a certain JSON object, and false if it is another JSON object? That way I can return the special addresses as a separate JSON, and then format them differently.

Andrew Whitaker Over a year ago

You would send isAddress down with the data you're already sending back from your server-side code. When you're building up the array of addresses, include an isAddress property that is always true for the addresss. You can completely omit it for the other list.

Collectives™ on Stack Overflow

jQuery autocomplete: Display certain objects differently?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related