select2 Rails 下拉列表未正确渲染

Let*_*ram 2 css ruby-on-rails coffeescript jquery-select2 select2-rails

我能够让 select2-rails 在大部分情况下工作,但是当我单击搜索栏时,我得到以下信息:

Select2 在搜索栏上不起作用

我正在使用以下 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"
    })
Run Code Online (Sandbox Code Playgroud)

以及以下 HTML:

<div class="col-md-6 text-right">
   <form>
      <%= select_tag "search", {}, id: "query" %>
    </form>
</div>
Run Code Online (Sandbox Code Playgroud)

应用程序.css

 *= require select2                                                                                 
 *= require select2-bootstrap                                                                       
 *= require_tree .                                                                                  
 *= require_self 
Run Code Online (Sandbox Code Playgroud)

应用程序.js

//= require jquery                                                                                  
//= require jquery.turbolinks                                                                       
//= require jquery_ujs                                                                              
//= require bootstrap                                                                               
//= require turbolinks                                                                              
//= require select2                                                                                 
//= require_tree .    
Run Code Online (Sandbox Code Playgroud)

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

有人有什么想法吗?

Jon*_*Jon 5

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

当使用 select2 和 bootstrap 时,位于 asset/stylesheets/application.scss 中的代码为我修复了所有内容

@import "bootstrap-sprockets";
@import "bootstrap";
@import "select2";
@import "select2-bootstrap";
Run Code Online (Sandbox Code Playgroud)