私は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
});
});
});