簡單形式的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，並此錯誤消息，但沒有任何直接的解決方案似乎在這裏工作......

來源

2017-03-08 MrWater

對此的解決方案實際上來找我，而我寫的問題，並決定爲p注意到html源碼。

所以它在這裏相當多的教訓作爲的方式，當一個人知道的東西的工作進行調試，以及一些應該做類似的東西不能正常工作。

只要我比較這兩個html代碼，我注意到data-autocomplete屬性沒有用簡單的形式發送。然後問題就出現了：如何將數據屬性傳遞給簡單的表單？

，瞧，計算器有答案：https://stackoverflow.com/a/8332537/1461972，所以最終我以結束：

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

來源

2017-03-08 22:54:21 MrWater

簡單形式的jquery-ui自動完成

回答

相關問題