{"id":3126,"date":"2014-03-16T22:55:45","date_gmt":"2014-03-16T22:55:45","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/03\/16\/how-do-i-use-select2-rails-with-simple_form-collection-of-common-programming-errors-2\/"},"modified":"2014-03-16T22:55:45","modified_gmt":"2014-03-16T22:55:45","slug":"how-do-i-use-select2-rails-with-simple_form-collection-of-common-programming-errors-2","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/03\/16\/how-do-i-use-select2-rails-with-simple_form-collection-of-common-programming-errors-2\/","title":{"rendered":"How do I use select2-rails with simple_form?-Collection of common programming errors"},"content":{"rendered":"

This select2<\/code> jquery library looks awesome. There is a Rails gem but it is very light on the documentation. I would like to generate a simple multiple drop-down menu, using autocomplete. How do I do that?<\/p>\n

This is my simple_form_for call:<\/p>\n

\n<\/code><\/pre>\n
I have successfully installed the select2-rails<\/code> gem, but not quite sure how to get it working.<\/p>\n
I add this to my home.js.coffee<\/code>file:<\/p>\n
jQuery ->\n    $('#selectWhereToLive').select2()\n<\/code><\/pre>\n
And am getting this error:<\/p>\n
Uncaught query function not defined for Select2 selectWhereToLive \n<\/code><\/pre>\n
Thoughts?<\/p>\n
Edit 1:<\/strong><\/p>\n
The above simple_form_for<\/code> call is producing this HTML:<\/p>\n
\n<\/code><\/pre>\n
Indicating that the id<\/code> attribute is being properly set.<\/p>\n
Edit 2 – Updated<\/strong><\/p>\n
As @moonfly suggested, I tried adding as: :select<\/code> to the f.input_field<\/code> – both with as: :autocomplete<\/code> included and not included.<\/p>\n
The resulting HTML without as: :autocomplete<\/code> was this:<\/p>\n
Yes\nNo\n<\/code><\/pre>\n
It pre-populates 2 option values ‘Yes’ and ‘No’. Not quite sure why, but that is what it does.<\/p>\n
Update<\/strong><\/em><\/p>\n
So I had changed the jquery selector to look for input#ID<\/code>, and forgot. So I set that back and now it is generating the select box – but it is giving me those 2 Yes & No options. Not quite sure why it is doing that. It’s not returning the values in from my url<\/code> attribute.<\/p>\n
Edit 3<\/strong><\/p>\n
@harish-shetty’s suggestion seems to be working. But now, after it has successfully found the records via autocomplete and using the select2 menu, it is bypassing the setter method I have on my search.rb<\/code> model.<\/p>\n
Basically, what I want to happen is, once the user has finished filling out the form – and I have all the IDs\/names for the neighborhoods they want, I want to create a new record in search_neighborhoods<\/code> for those IDs.<\/p>\n
So these are the methods I have:<\/p>\n
Search.rb\n\n  def neighborhood_names\n    neighborhoods.map(&:name).join(',')\n  end\n\n  # we need to put [0] because it returns an array with a single element containing\n  # the string of comma separated neighborhoods\n  def neighborhood_names=(names)\n    names[0].split(',').each do |name|\n      next if name.blank?\n      if neighborhood = Neighborhood.find_by_name(name)\n        search_neighborhoods.build neighborhood_id: neighborhood.id\n      end\n    end\n  end\n<\/code><\/pre>\n
My SearchController.rb<\/code><\/p>\n
  def autocomplete_neighborhood_name\n    @neighborhood = Neighborhood.select(\"id, name\").where(\"name LIKE ?\", \"#{params[:name]}%\").order(:name).limit(10)\n\n    respond_to do |format|\n      format.json { render json: @neighborhood , :only => [:id, :name] }\n    end    \n  end\n<\/code><\/pre>\n
This is what a request looks like right now – which shows that no search_neighborhood<\/code> records are being created:<\/p>\n
Started POST \"\/searches\" for 127.0.0.1 at 2013-03-06 04:09:55 -0500\nProcessing by SearchesController#create as HTML\n  Parameters: {\"utf8\"=>\"?\", \"authenticity_token\"=>\"7SeA=\", \"search\"=>{\"boro_id\"=>\"\", \"neighborhood_names\"=>\"1416,1394\", \"property_type_id\"=>\"\", \"min_price\"=>\"\", \"max_price\"=>\"\", \"num_bedrooms\"=>\"\", \"num_bathrooms\"=>\"\"}}\n  Neighborhood Load (0.5ms)  SELECT \"neighborhoods\".* FROM \"neighborhoods\" WHERE \"neighborhoods\".\"name\" = '1' LIMIT 1\n   (0.3ms)  BEGIN\n  SQL (0.8ms)  INSERT INTO \"searches\" (\"amenity_id\", \"boro_id\", \"created_at\", \"keywords\", \"listing_type_id\", \"max_price\", \"min_price\", \"neighborhood_id\", \"num_bathrooms\", \"num_bedrooms\", \"property_type_id\", \"square_footage\", \"updated_at\") VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13) RETURNING \"id\"  [[\"amenity_id\", nil], [\"boro_id\", nil], [\"created_at\", Wed, 06 Mar 2013 09:09:55 UTC +00:00], [\"keywords\", nil], [\"listing_type_id\", nil], [\"max_price\", nil], [\"min_price\", nil], [\"neighborhood_id\", nil], [\"num_bathrooms\", nil], [\"num_bedrooms\", nil], [\"property_type_id\", nil], [\"square_footage\", nil], [\"updated_at\", Wed, 06 Mar 2013 09:09:55 UTC +00:00]]\n   (32.2ms)  COMMIT\nRedirected to http:\/\/localhost:3000\/searches\/29\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
This select2 jquery library looks awesome. There is a Rails gem but it is very light on the documentation. I would like to generate a simple multiple drop-down menu, using autocomplete. How do I do that? This is my simple_form_for call: I have successfully installed the select2-rails gem, but not quite sure how to get […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3126","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=3126"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3126\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=3126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=3126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=3126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}