Bootstrap 多选下拉菜单，在 Rails 上带有搜索栏

Posted 2023-03-05

【中文标题】Bootstrap 多选下拉菜单，在 Rails 上带有搜索栏

【英文标题】：Bootstrap multiselect dropdown with search bar on rails

【发布时间】：2021-07-05 21:41:54

【问题描述】：

我正在尝试在我的 rails 应用程序中将Bootstrap Multiselect 与搜索栏结合使用。

Multiselect 的演示引导代码（我正在尝试重新创建）：

<select class="select" multiple data-mdb-placeholder="Example placeholder" multiple>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

我的视图文件包含下面的代码，它呈现一个显示选项的框，但选择多个选项的唯一方法是执行 ctrl+shift - 这绝对是我不想要的。

<div class="row">
    <div class="col-md-12">
        <%= form_with(model: @post, url: posts_path, method: :get) do |form| %>
            <%= search_field_tag :search, params[:search], placeholder: "Look for Post", class: "form-control" %>   
            <%= select_tag 'Post Categories', options_for_select(@categories.map|c| c), :multiple => true, class: "form-control" %>    
            <%= form.submit "Search"%>
        <% end %>
    </div>
</div>

到目前为止我尝试过的一些事情： select_tag 行的类现在是“form-control”，但我尝试使用

class="select"
class="select" multiple data-mdb-filter="true">

我想使用 bootstrap 多选以及 form_with，以便我可以将参数从下拉菜单和搜索栏传递到我的控制器。将所有内容放在同一行中会很棒，但我也不知道如何做到这一点。

任何想法将不胜感激！

红宝石 2.7.2p137 引导程序 4

【参考方案1】：

您的代码是正确的，但由于您使用的是引导程序 4，因此您需要包含 bootstrap-select 插件并可能调用一些 javascript（您可以在此处查看答案 Bootstrap 4 multiselect dropdown 并在此处查看更多详细信息 https://developer.snapappointments.com/bootstrap-select/）

我还需要指出，您的代码中有 options_for_select(@categories.map|c| c)，这与 options_for_select(@categories) 相同，此处不需要映射，因为它会返回自身，并且如果类别曾经出现，它可能会使您的视图渲染速度稍慢太大了

【讨论】：

另请注意，您共享的库：mdbootstrap.com/docs/standard/extended/multiselect 也不是引导程序的一部分

我在分享这篇文章之前安装了 bootstrap-select - 仍然没有工作。您共享的链接的代码分为带引导程序的 html 和 javascript 代码行（我不知道在哪里包含 - 它应该在我的 html.erb 文件的开头吗？）。我是 Ruby on Rails 和 html 的新手，我不确定如何将 js 与 html.erb 文件结合起来。看起来大多数解决方案只包括下拉菜单，这使得它更容易，因为你只包括 class="selectpicker"，但我的问题是结合 form_with 和 select-picker。您对@categories 的看法是正确的！

您的代码正确，from_with 和 select-picker 的组合正确 - 现在您需要通过 JS 激活代码作为快速试用，请在浏览器和内部打开开发工具控制台尝试 js 命令 $('select').selectpicker(); 并查看您的选择表单是否有效 - 让我知道它是否有效

我打开了 JavaScript 控制台，运行命令后它说TypeError: ('select').selectpicker is not a function. (In '('select').selectpicker()', '('select').selectpicker' is undefined)