用simpleform自动完成jquery

Question

我只是花了一些时间在这个问题上，如果我这样做了，也许其他人也会这样做。所以我先把问题和答案放在一起。

我正在Rails 5上运行，试图稍微干燥一下代码，并将代码从form_for更改为simple_form_for。

使用form_for，我通过跟踪这个教程并解决turbo-链接问题，成功地实现了自动完成。

有:在_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>

...

和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')

我的caes_controller：

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

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

还有我的company.rb

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

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

当我改变

  <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>

通过匹配的html代码：

  <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>

至

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

使用以下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>

当我开始在输入中输入一个数字时，我得到

this.source不是一个函数

错误

所以.我一直在寻找jquery和simpleform的解决方案，还有这个错误消息，但是这里似乎没有任何直接的解决方案。

Answer 1

这一问题的解决方案实际上是在我写问题的时候想到的，并决定粘贴html源代码。

所以，这是一个很好的教训，当一个人知道一些有用的东西，并且应该做一些类似的事情不起作用的时候，就可以进行调试。

当我比较两种html代码时，我注意到数据自动完成属性不是用简单的表单发送的。然后问题就来了:如何将数据属性传递给简单的表单？

当然，堆栈溢出有答案：https://stackoverflow.com/a/8332537/1461972，所以我最终得到了：

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