jQuery-UI Autocomplete Widget passing multiple params to Rails server-side datasource

Question

There was a question in the comments section of the AutoComplete Railscast that was unanswered and I need help with the same issue. http://railscasts.com/episodes/102-auto-complete-association-revised?view=comments#comment_159833

I'm implementing jQuery-UI Autocomplete with the datasource coming from a Rails Controller which in turn is calling the Foursquare API. The Foursquare API requires 2 parameters (a "query" and a "lat/long" value).

The Autocomplete widget's default param that it sends to the Rails controller is params[:term] which contains the "query". I need the Autocomplete Widget to pull the value from another text_field (let's call it the geocode_location field) and pass that as the "latlong" param.

So effectively, the GET request to the Rails Controller would be

Request URL:http://localhost:3000/foursquare?ll=37.7+-122.5&term=McDonalds

and not

Request URL: URL:http://localhost:3000/foursquare?term=McDonalds

Below is my current coffeescript file. I need to try to pass it extraParams or some way to let it know to pass a param named :latlong. How do I do that with Coffeescript and this type of data source?

 $('[type="text"][name*="[location]"]').autocomplete
    source: $('[type="text"][name*="[location]"]').data('autocomplete-source')
    focus: (event, ui) ->
      event.preventDefault()
      $(this).val ui.item.label
    select: (event, ui) ->
      event.preventDefault()
      $(this).val ui.item.label
      $(this).siblings('[name*="[foursquare_id]"]').val ui.item.value

I'm not very familiar with Coffeescript syntax but really appreciate the help here. There is a similar question here but the data source for the autocomplete results is different. jQuery UI - Autocomplete with extra params - returned data

I'm not too familiar with coffeescript but I can provide a pure JS solution. Would that help? — Andrew Whitaker
– Andrew Whitaker, Commented Oct 31, 2012 at 23:46
Yea that would be great. At this point - I think anything in the right direction would help. I will try my best to translate back to Coffeescript and post back if it works. Thanks @AndrewWhitaker — Hung Luu
– Hung Luu, Commented Nov 1, 2012 at 0:37

Hung Luu · Accepted Answer · 2012-11-01 21:54:15Z

Finally got it after many, many hours. See below for the syntax on how to apply additional parameters to pass through to server-side Rails controller. So effectively, I am able to get this now Request URL:http://localhost:3000/foursquare?ll=37.7+-122.5&term=McDonalds. Hope this helps somebody.

 $('[type="text"][name*="[location]"]').autocomplete(
    source: (request, response) ->
      $.ajax 
        url: $('[type="text"][name*="[location]"]').data('autocomplete-source')
        data: {term: request.term, ll: this.element.siblings('[name*="[geocode_location]"]').val()}
        contentType: "application/json; charset=utf-8"
        success: (data) ->
          response $.map(data, (item) ->
            value: item.value
            label: item.label
            address: item.address
          )

    focus: (event, ui) ->
      event.preventDefault()
      $(this).val ui.item.label
    select: (event, ui) ->
      event.preventDefault()
      $(this).val ui.item.label
      $(this).siblings('[name*="[foursquare_id]"]').val ui.item.value
  ).data("autocomplete")._renderItem = (ul, item) ->
    $("<li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.address + "</a>").appendTo ul

Collectives™ on Stack Overflow

jQuery-UI Autocomplete Widget passing multiple params to Rails server-side datasource

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related