jquery-ui 用 simpleform 自动完成

Posted 2023-05-09

【中文标题】jquery-ui 用 simpleform 自动完成

【英文标题】：jquery-ui autocomplete with simpleform

【发布时间】：2017-07-29 17:44:28

【问题描述】：

我刚刚在这个问题上花了一些时间，如果我这样做了，也许其他人也会这样做。所以我只是提出问题，然后是答案......

我在 Rails 5 上运行并尝试稍微干燥我的代码，并从 form_for 更改为 simple_form_for。

使用 form_for，我设法通过遵循此 tutorial 并解决了 turbo-links 问题来实现自动完成功能。

并且有： 在 _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>

...

和company.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

还有我的公司.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 的解决方案，以及此错误消息，但似乎没有任何直接解决方案在这里有效...

【参考方案1】：

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

所以这是一个相当不错的教训，作为一种调试方法，当人们知道某些东西正在工作，而应该做类似事情的东西却不工作时。

当我比较两个 html 代码时，我注意到 data-autocomplete 属性没有以简单的形式发送。然后问题就来了：如何将数据属性传递给简单的表单？

瞧，*** 有答案：https://***.com/a/8332537/1461972，所以最后我得到了：

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