select2 rails 下拉菜单无法正确呈现

Posted 2023-03-03

【中文标题】select2 rails 下拉菜单无法正确呈现

【英文标题】：select2 rails dropdown not rendering properly

【发布时间】：2016-06-28 03:04:53

【问题描述】：

我能够让 select2-rails 在大多数情况下正常工作，但是当我点击搜索栏时，我得到以下信息：

我正在使用以下 CoffeeScript：

    $('#query').select2(
            placeholder: placeholder_text
            minimumInputLength: 2
            ajax:
                    url: end_point
                    tags: "false",
                    dataType: 'json',
                    delay: 200,
                    cache: true,
                    data: (params) ->
                            return  search: params.term.toUpperCase() 
                    processResults: (data, params) ->
                            return  results: data 
            theme: "bootstrap"
    )

还有以下 html：

<div class="col-md-6 text-right">
   <form>
      <%= select_tag "search", , id: "query" %>
    </form>
</div>

应用程序.css

 *= require select2                                                                                 
 *= require select2-bootstrap                                                                       
 *= require_tree .                                                                                  
 *= require_self 

应用程序.js

//= require jquery                                                                                  
//= require jquery.turbolinks                                                                       
//= require jquery_ujs                                                                              
//= require bootstrap                                                                               
//= require turbolinks                                                                              
//= require select2                                                                                 
//= require_tree .    

正如我所说，我可以查询很好，我只是希望搜索栏正确对齐......

有人有什么想法吗？

【问题讨论】：

js控制台有报错信息吗？

您的 CoffeeScript 到底是什么样的？您问题中的缩进似乎有点偏离。

对齐只是一个css问题。我的原因是引导程序以错误的 select2 内容顺序加载。因为我使用 bootstrap-sass，所以我有一个 css.scss 文件，它首先加载并为 bootstrap 和 sprockets 进行导入。之后选择看起来就好了。

【参考方案1】：

这是对 trh 评论的扩展，因为它让我走上了正确的道路。

将 select2 与 bootstrap 一起使用时，位于 assets/stylesheets/application.scss 中的此代码为我修复了所有问题

@import "bootstrap-sprockets";
@import "bootstrap";
@import "select2";
@import "select2-bootstrap";

【讨论】：

这也是我想做的，但现在我看到了这个错误。 File to import not found or unreadable: select2.你一开始是不是碰巧看到了这个？

您好，我认为我没有收到该错误。确保您有 gem 'sass-rails' 和 select2 + bootstrap 的所有其他要求。如果一切都失败了，请重新安装 gems。