简单形式的jquery-ui自动完成

问题描述：

我刚刚在这个问题上花了一些时间，如果我做了，也许别人也做了。所以我只是把问题，然后回答...简单形式的jquery-ui自动完成

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

...

和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

与我公司联系.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，并此错误消息，但没有任何直接的解决方案似乎在这里工作......

答

对此的解决方案实际上来找我，而我写的问题，并决定为p注意到html源码。

所以它在这里相当多的教训作为的方式，当一个人知道的东西的工作进行调试，以及一些应该做类似的东西不能正常工作。

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

，瞧，计算器有答案：https://stackoverflow.com/a/8332537/1461972，所以最终我以结束：

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

简单形式的jquery-ui自动完成

相关推荐