1

私はjqueryのオートコンプリートの統合に初めて成功しました。これは、Rails 3アプリのmysqlデータベースから結果を返し、フィルター処理するためです。さまざまなテーブルのいくつかの異なる形式でいくつかのテキストフィールドに入力します。

それは非常にうまく機能しますが、間違いなく非効率的なコード設定です。私はそれを正しい方法で書くことを試みるのにしばらく時間を費やしました、しかし私はそれを正しくすることができませんでした。私の現在のスキルレベルを少し超えています。

私はまだ探している初心者のためにここに解決策を投稿すると思いました(これでも私には少し難しいので)、そして誰かがそれを適切に単純化するためのいくつかのヒントを通して私たちを推薦/ガイドできるかどうかを確認しますか?

(これは私の最初のSO貢献でもあります。私はついに価値のあるものを持っていると感じたので、初心者の間違いを許してください)

私のgemfileで;

group :assets do
     gem 'jquery-ui-rails'
end

gem 'jquery-rails'

次に、すべてのgemがインストールされていることを確認します。

必要なビューに含まれている私のapplication.cssファイル。

*= require jquery.ui.all

1つのフォームの関連するコントローラーファイル。

  # GET /auto_custom_method1.json
  def auto_custom_method1
    render :json => Model.where("database_column_name1 LIKE ?", "%#{params[:term]}%").map(&:database_column_name1).uniq
  end

  # GET /auto_custom_method2.json
  def auto_custom_method2
    render :json => Model.where("database_column_name2 LIKE ?", "%#{params[:term]}%").map(&:database_column_name2).uniq
  end

  # GET /auto_custom_method3.json
  def auto_custom_method3
    render :json => Model.where("database_column_name3 LIKE ?", "%#{params[:term]}%").map(&:database_column_name3).uniq
  end

  # GET /auto_custom_method4.json
  def auto_custom_method4
    render :json => Model.where("database_column_name4 LIKE ?", "%#{params[:term]}%").map(&:database_column_name4).uniq
  end

  # GET /auto_custom_method5.json
  def auto_custom_method5
    render :json => Model.where("database_column_name5 LIKE ?", "%#{params[:term]}%").map(&:database_column_name5).uniq
  end

別のフォームの関連するコントローラーファイル内。

# GET /auto_custom_method6.json
  def auto_custom_method6
    render :json => Model.where("database_column_name5 LIKE ?", "%#{params[:term]}%").map(&:database_column_name6).uniq
  end

  # GET /auto_custom_method7.json
  def auto_custom_method7
    render :json => Model.where("database_column_name5 LIKE ?", "%#{params[:term]}%").map(&:database_column_name7).uniq
  end

  # GET /auto_custom_method8.json
  def auto_custom_method8
    render :json => Model.where("database_column_name5 LIKE ?", "%#{params[:term]}%").map(&:database_column_name8).uniq
  end

必要なビューに含まれている私のapplication.jsファイル。

model_name、auto_custom_method、および#field_idはすべて、固有のアプリケーションに応じてカスタマイズされます。

//= require query
//= require jquery_ujs
//= require jquery.ui.all

$(function() {
    $.getJSON("/model_name1/auto_custom_method1", function(data) {
        $("#field_id1").autocomplete({
            source: data,
            minLength: 1
        });
    });
});
$(function() {
    $.getJSON("/model_name1/auto_custom_method2", function(data) {
        $("#field_id2").autocomplete({
            source: data,
            minLength: 1
        });
    });
});
$(function() {
    $.getJSON("/model_name1/auto_custom_method3", function(data) {
        $("#field_id3").autocomplete({
            source: data,
            minLength: 1
        });
    });
});
$(function() {
    $.getJSON("/model_name1/auto_custom_method4", function(data) {
        $("#field_id4").autocomplete({
            source: data,
            minLength: 1
        });
    });
});
$(function() {
    $.getJSON("/model_name1/auto_custom_method5", function(data) {
        $("#field_id5").autocomplete({
            source: data,
            minLength: 1
        });
    });
});
$(function() {
    $.getJSON("/model_name2/auto_custom_method6", function(data) {
        $("#field_id6").autocomplete({
            source: data,
            minLength: 1
        });
    });
});
$(function() {
    $.getJSON("/model_name2/auto_custom_method7", function(data) {
        $("#field_id7").autocomplete({
            source: data,
            minLength: 1
        });
    });
});
$(function() {
    $.getJSON("/model_name2/auto_custom_method8", function(data) {
        $("#field_id8").autocomplete({
            source: data,
            minLength: 1
        });
    });
});
4

0 に答える 0