Question

我刚刚第一次成功整合了jquery的自动完成功能，在我的rails 3应用程序中返回并过滤mysql数据库的结果，因为你为不同的表格输入了几种不同形式的文本字段。

它非常有效，但绝对是低效的代码设置。我花了一些时间试图以正确的方式写它，但我无法做到正确;有点远远超出我目前的技能水平。

我以为我会在这里发布解决方案，对于那些仍在寻找的新手（因为这对我来说有点困难），并且看看是否有人可以通过一些提示来引导我们，以便正确地简化它？

（这也是我的第一个SO贡献;我终于觉得我有一些值得的东西，所以请原谅任何新手的错误）

我宝石文件中的

;

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

gem 'jquery-rails'

然后确保安装了所有宝石。

我的application.css文件中的

，它包含在必要的视图中;

*= require jquery.ui.all

一个表单的关联控制器文件中的

;

  # 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
        });
    });
});

针对多个字段的简化JQuery自动完成解决方案

0 个答案: