jquery-uiシンプルフォームでオートコンプリート

Question

私はちょうどこの問題で少し時間を費やしました。だから私はちょうど質問と答えを配置します。

私はRails 5で動作していて、コードを少し乾燥させ、form_forからsimple_form_forに変更しようとしています。

with form_for、私はこのtutorialをフォローし、ターボリンクの問題にも対処することによって、オートコンプリートの仕事を得ることができました。

とあります _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 
... 

私はhtmlコードに一致して

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

で

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

に

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

を

と私は私の入力に番号の入力を開始するとき、私は

this.sourceが

エラー

だから... ...私は周りの解決策を見てきた機能ではありません取得jqueryとsimpleform、そしてこのエラーメッセージもありますが、ここでは直接解決策のどれもここでは機能していないようです...

Answer 1

私が質問を書いている間、 HTMLソースとは異なります。

ここでは、動作しているものが何かを知っているときにデバッグする方法として、また動作しない同様のものをやっていると思われるものとして、ここでかなり教訓があります。

私は両方のhtmlコードを比較するとすぐに、データオートコンプリート属性がシンプルフォームで送信されていないことに気付きました。それでは、単にデータ属性を単純な形式に渡す方法が問題になりました。

と出来上がり、stackoverflowの答えがあります：https://stackoverflow.com/a/8332537/1461972を、ので、最終的に私がなってしまった：

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