Rails Jquery Autocomplete with JSON fails

Question

I am attempting to use a remote service to populate an autocomplete field that I have in rails. It is supposed to query and return available employees by last name

I have an action in my controller called employeeAutocomplete which gathers data from an outside database:

class ServicesController < ApplicationController
 def employeeAutocomplete
  @banner = employeeSearch(params[:term])
  respond_to do |format|
    format.json { render :json => @banner.to_json }
  end
 end

In my routes.rb I have a placeholder route:

match '/banner/cheese' => 'services#employeeAutocomplete'

I can successfully browse to http://0.0.0.0:3000/banner/cheese.json?term=mac and receive an array such as the following with employee data:

[ {"LAST_NAME": "MacDougal", "FIRST_NAME": "Elaine", "TITLE": "Internet Technician"}, {"LAST_NAME": "MacCallum", "FIRST_NAME": "Harvey", "TITLE": "Systems Architect"} ]

However, this does not work with the autocomplete field. Here's the javascript for my view:

$("#service_employeeLast").autocomplete({
    source: "/banner/cheese.json"
});

I receive an error in the firebug console:

I'm at wits end. I do not know what I'm doing wrong, I've tried two different autocomplete plugins and keep getting this same error jquery.js:8103

Help!

Can you show the whole text of the error that appears in the JavaScript console? — Jamison Dance
– Jamison Dance, Commented Mar 19, 2012 at 14:16
That is it. It says GET 0.0.0.0:3000/banner/cheese.json?term=mcc and then it says jquery.js:8103 Here is an image — Oranges13
– Oranges13, Commented Mar 19, 2012 at 14:25
I've even just modified the json it returns to fit the "label", "value" keys and that has made zero difference. I can still access the url through the web browser, but javascript acts like its inaccessible. If I paste the generated array directly into the source: it works! Something is wrong with the routing here. Why can't the backend js access the url like I can? — Oranges13
– Oranges13, Commented Mar 19, 2012 at 14:28
Can you do an AJAX request without the autocomplete stuff? So $.get('/banner/cheese.json', function (data, status, xhr) {console.log(data);}) — Jamison Dance
– Jamison Dance, Commented Mar 19, 2012 at 14:30
I added a term request so it would hopefully return something $.get('/banner/cheese.json?term=mcc', function (data, status, xhr) {console.log(data);}) and received the same message as the image above in the comment. — Oranges13
– Oranges13, Commented Mar 19, 2012 at 14:39

Oranges13 · Accepted Answer · 2012-03-20 19:06:31Z

2

Believe it or not it was Google Chrome causing the issue. Apparently it dislikes localhost ajax calls. Here is the updated code working as intended:

services.js

$(function() {
 $( "#service_employeeLast" ).autocomplete({
    source: "/banner/fetch",
    minLength: 2,

 });
});

services_controller

def employeeAutocomplete
    @banner = employeeSearch(params[:term])
    @banner_hash = []
    @banner.each do |b|
        @banner_hash << { 
            :title => b["POSITION_TITLE"], 
            :label => [b["FIRST_NAME"], b["LAST_NAME"]].join(" "), 
            :value => b["LAST_NAME"], 
        }
    end
    render :json => @banner_hash
end

The key here also that your return value hash has a label and value key/value pair

answered Mar 20, 2012 at 19:06

Oranges13

1,0841 gold badge10 silver badges34 bronze badges

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

Comments

Yanhao · Accepted Answer · 2012-03-19 14:33:38Z

1

Maybe you encoded the data twice with render :json => @banner.to_json. It should be render :json => @banner, and the data will be encoded automatically.

answered Mar 19, 2012 at 14:33

Yanhao

5,3021 gold badge24 silver badges15 bronze badges

1 Comment

Oranges13 Over a year ago

Thanks, that makes sense. Didn't seem to make a difference though :(

Collectives™ on Stack Overflow

Rails Jquery Autocomplete with JSON fails

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related