Rails 管理员：下拉条目太多答案

【问题标题】：Rails Admin: too many dropdown entriesRails 管理员：下拉条目太多
【发布时间】：2020-12-14 12:12:21
【问题描述】：

在我的 rails_admin 应用程序中，我有一个表“Branch”，它引用了另一个名为“Alarms”的表。在“分支”中，我想只选择一个警报并有一个搜索框来搜索这些警报。

目前，我只能创建一个下拉列表，其中包含与该分支相关的所有警报，这会导致渲染许多条目（超过 25k）并消耗内存。我找不到一个示例如何创建一个显示“条目太多，搜索以选择”的下拉列表，类似于 has_and_belongs_to_many。

它的外观如下：

class Branch < ApplicationRecord
...
  # this is fine and works as expected, selecting only the first (and only) entry
  show do
    field :maintenance_period_trigger_alarm_id do
      formatted_value do
        alarm = Alarm.where(id: bindings[:object].maintenance_period_trigger_alarm_id).first
        path = bindings[:view].show_path(model_name: 'alarm', id: alarm.id)
        bindings[:view].link_to(alarm.name, path)
      end
    end
  end
  ...
  # this is where all elements are automatically loaded and rendered in the dropdown
  edit do
    field :maintenance_period_trigger_alarm_id, :enum do
      enum do
        Alarm.where(branch_id: bindings[:controller].params[:id]).collect{ |alarm| [alarm.name, alarm.id] }
      end
    end
  end

我不确定如何启用简单的“条目过多”消息，以使其不显示 25k 条目。

【问题讨论】：

count 记录，如果超过某个阈值，则显示静态消息而不是填充下拉列表。
您正在寻找的是一个选择字段，它没有预先填充选择选项，但当用户开始输入搜索字符串时，它将动态开始查询服务器以查找匹配选项。看看https://select2.org/data-sources/ajax。如果您在实施它时需要任何帮助，请告诉我！
遵循@AndreasGebhard 的想法，您可以使用内置的选择选项下拉菜单，如果您想按照该路线进行操作，我可以为您提供答案
我对任何一种方法都持开放态度。但是我不确定如何实现它，因为我对 rails 不是很好（不是说很糟糕），而且代码库没有我可以复制和扩展的东西。一个充实的答案听起来令人兴奋。

标签： ruby-on-rails ruby memory rails-admin

【解决方案1】：

@zokkker13，这是一个非常基本的充实示例，它将按姓名查询 people_controller.rb 中的人。

将 select2 添加到您的页面
download select2.js 和 select2.css，将它们放入您的供应商文件夹并将它们添加到您的 applications.js 和 application.css 文件中，或者只是 include them from a CDN 进入您的页面。加载您的页面并使用浏览器的开发工具确保已加载 select2.js。

添加到config/routes.rb的新路由

resources :people do
  collection do
    get 'search'
  end
end

重启你的服务器。

将搜索操作添加到people_controller.rb

# coding: utf-8
class PeopleController < ApplicationController

  def search
    
    # https://select2.org/data-sources/ajax
    term = params[:term]
    matches = Person.where("name ILIKE ?", "%#{term}%").to_a
    
    # https://select2.org/data-sources/formats
    matches.map!{ |m| { id: m.id, text: m.name } }
    
    respond_to do |format|
      format.json {
        render status: 200, json: { results: matches }
      }
    end

  end

end

向页面添加搜索框
将此添加到您的 html 页面：

<%= select_tag :search, nil, id: 'select2-live-search-people' %>
<script>
  $(document).ready( function() {
    $('#select2-live-search-people').select2({
      ajax: { url: '/people/search', dataType: 'json' },
      placeholder: 'Start typing to search...',
      width: '300px',
      minimumInputLength: 3
    });
  } );
</script>

.. 或者这个，如果你使用haml：

= select_tag :search, nil, id: 'select2-live-search-people'
:javascript
  $(document).ready( function() {
    $('#select2-live-search-people').select2({
      ajax: { url: '/people/search', dataType: 'json' },
      placeholder: 'Start typing to search...',
      width: '300px',
      minimumInputLength: 3
    });
  } );

修改代码，使其能够查询具有现有数据的现有模型。然后重新加载页面并开始输入。您现在应该看到选择选项已根据搜索词的结果进行了调整。使用minimumInputLength 参数控制发出ajax 调用最少需要多少个字符。有了潜在的 25k 选项，您可能希望增加更多。

【讨论】：

@zokkker13 遇到问题了吗？