Rails 3.1 auto_complete plugin gives strange error

Question

I'm using auto_complete plugin:

https://github.com/crowdint/rails3-jquery-autocomplete

I have installed the gem and added require line in my manifest file as instructed:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require autocomplete-rails
//= require prototype
//= require prototype_ujs

Having done just this, firebug gives me this error message:

$("input[data-autocomplete]") is null

and error is traced to this line in autocomplete-rails.js:

$(document).ready(function(){$("input[data-autocomplete]").railsAutocomplete()})...

I'm using:

Rails 3.1.0
Ruby 1.9.2

Has anyone experienced the same? I just installed and required the gem and not even started doing the changes to the controller / view.

Any help would be appreciated!

Answer 1

Do not use Prototype library at the same time with Jquery. Unfortunately this was only solution i could come up with. I tried noConflict statements and loading libraries in different order. I'm accepting this answer now, because there haven't been any other solutions.

Answer 2

autocomplete-rails.js will search an element with attribute 'data-autocomplete' after the document is ready.

As you did not added the auto complete field in your view page it shows null.
You can add auto field with auto complete in two ways.

1.Using form_for

form_for @product do |f|
  f.autocomplete_field :brand_name, autocomplete_brand_name_products_path
end  

This will generate an html

<input type="text" data-autocomplete="products/autocomplete_brand_name">

2.Using form_tag

form_tag 'some/path'
  autocomplete_field_tag 'address', '', address_autocomplete_path, :size => 75
end

Nothing you did wrong.You are in the middle of development.This problem will be solved when you added autocomplete filed in your view page as described in the gem.

cheers :)