jquery-ui autocomplete with simpleform

Question

I just spent some time with this issue, and if I did, maybe someone else does too. So I'll just place the question and then the answer...

I'm running on Rails 5 and trying to dry my code a bit, and changing from form_for to simple_form_for.

with form_for, I managed to get autocomplete working by following this tutorial and addressing the turbo-links issue too.

and have: under _form.html.erb ...

<div class="form-group">
  <%= f.label :cae_id, class: "col-md-5 control-label" %>
  <div class="col-md-7">
    <%= f.text_field :cae_codenr, data: { autocomplete_source: index_autocomplete_caes_path, remote: true} %>
  </div>
</div>

...

and companies.coffee

$(document).on 'turbolinks:load', ->

  jQuery ->
    $('#company_cae_codenr').autocomplete source: $('#company_cae_codenr').data('autocomplete-source') 
  jQuery ->
    $('#user_company_attributes_cae_codenr').autocomplete source: $('#user_company_attributes_cae_codenr').data('autocomplete-source')

and my caes_controller:

def index_autocomplete
   @caes = Cae.order(:codenr).where("codenr like ?", "%#{params[:term]}%")

   render json: @caes.map(&:codenr)
end

and my company.rb

...
  def cae_codenr
    cae.try(:codenr)
  end

  def cae_codenr=(codenr)
    self.cae = Cae.find_by(codenr: codenr) if codenr.present?
  end
...

when I change

  <div class="form-group">
    <%= f.label :cae_id, class: "col-md-5 control-label" %>
    <div class="col-md-7">
      <%= f.text_field :cae_codenr, data: { autocomplete_source: index_autocomplete_caes_path, remote: true} %>
    </div>
  </div>

with matching html code:

  <div class="form-group">
    <label class="integer required col-md-5 control-label" for="company_cae_id">
       <abbr title="required">*</abbr> 
       Cae
    </label>
    <div class="col-md-7">
       <input data-autocomplete-source="/caes/index_autocomplete" data-remote="true" type="text" name="company[cae_codenr]" id="company_cae_codenr" />
    </div>
  </div>

to

<%= f.input :cae_codenr, data: { autocomplete_source: index_autocomplete_caes_path, remote: true} %>

with the following HTML

   <div class="input string optional company_cae_codenr">
    <label class="string optional" for="company_cae_codenr">Cae codenr</label>
     <input class="string optional" type="text" name="company[cae_codenr]" id="company_cae_codenr" />
   </div>

and when I start entering a number in my input I get

this.source is not a function

error

So...I've looked for solutions around jquery and simpleform, and also this error message, but not any of the direct solutions seem to work here...

score 1 · Accepted Answer · edited May 23 '17 at 12:09

The solution for this actually came to me while I was writing the question, and decided to paste the html source.

So it's quite a lesson here as a way to debug when one knows something that's working, and something that is supposed to do similar stuff not working.

As soon as I compared both html code, I noticed the data-autocomplete attribute was not being sent with simple form. And then the question just came: How to pass data attributes to simple form?

and voilá, stackoverflow has the answer: https://stackoverflow.com/a/8332537/1461972, and so in the end I ended up with:

  <%= f.input :cae_codenr, input_html: {data: { autocomplete_source: index_autocomplete_caes_path}} %>

jquery-ui autocomplete with simpleform

1 Answers1