标签: select2-rails

根据标题,是否有办法强制select2始终创建下拉列表而不是下拉？

当你在下拉列表上方滚动,添加新的CSS类"select2-drop-above"或两者兼而有之时,似乎还有一些javascript导致翻转.

编辑:我应该指定我通过select2-rails拉动库.我希望有一种解决方法,不涉及在我自己拉动整个select2 lib并直接编辑select2.js文件.

这个 select2 jquery库看起来很棒.有一个Rails宝石,但它在文档上非常轻松.我想使用自动完成功能生成一个简单的多下拉菜单.我怎么做？

这是我的simple_form_for调用:

<%= f.input_field :neighborhood_names, url: autocomplete_neighborhood_name_searches_path, as: :autocomplete, data: { delimiter: ',', placeholder: "Where do you want to live?"}, multiple: true, id: "selectWhereToLive", class: "span8" %>

我已经成功安装了select2-railsgem,但不太确定如何让它工作.

我把它添加到我的home.js.coffee文件中:

jQuery ->
    $('#selectWhereToLive').select2()

我收到这个错误:

Uncaught query function not defined for Select2 selectWhereToLive 

思考？

编辑1:

上面的simple_form_for调用产生了这个HTML:

<input class="autocomplete optional span8" data-autocomplete="/searches/autocomplete_neighborhood_name" data-delimiter="," data-placeholder="Where do you want to live?" id="selectWhereToLive" multiple="multiple" name="search[neighborhood_names][]" size="30" type="text" url="/searches/autocomplete_neighborhood_name" value="" />

指示id正确设置属性.

编辑2 - 更新 …

我已经尝试过select2-rails gem的文档,但是我的浏览器控制台仍然会抛出错误.

未捕获的TypeError:$(...).select2不是函数

我正在使用rails 4.0.1&select2-rails 3.5.9.3

我的application.js

//= require jquery
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require turbolinks
//= require vendor_js
//= require_tree .

$(document).ready(function() {
  $("select#team_select").select2();
});

application.css

*= require select2
*= require_self
*= require jquery.ui.accordion
*= require jquery.ui.menu
*= require jquery.ui.datepicker
*= require common
*= require owl.carousel
*= require lazybox
*= require fancybox …

是的,我们可以像这样添加占位符select2,

$("#e2_2").select2({
placeholder: "Select a State"
});

但是我需要这样的东西,

在这里你可以看到linkedin提供"键入另一个专业领域".意味着当您再次选择专业知识时,它会显示占位符以供选择 我想用select2做同样的事情.

请帮忙.

所以我一直在玩acts_as_taggable_on活跃的管理员,并且大多数情况下一切都按预期工作.

但是,每当我搜索标签并将现有标签添加到模型时,它似乎将其保存为ID,而不是名称.创建新标签会返回正确的名称,当我再次编辑对象时,标签仍会被名称标记.但是当我尝试添加另一个已经存在于数据库中的标记时,它会返回表单中的名称,并且似乎保存正常,但是当我再次编辑onject时,标记显示为ID,而不是而不是名字.

在admin/gift.rb:

controller do
  def autocomplete_gift_tags
    @tags = ActsAsTaggableOn::Tag
      .where("name LIKE ?", "#{params[:q]}%")
      .order(:name)
    respond_to do |format|
      format.json { render json: @tags , only: [:id, :name], root: false }
    end
  end
end

在tag-autocomlete.js:

$(document).ready(function() {
  $('.tagselect').each(function() {
    var placeholder = $(this).data('placeholder');
    var url = $(this).data('url');
    var saved = $(this).data('saved');
    $(this).select2({
        tags: true,
        placeholder: placeholder,
        minimumInputLength: 1,
        initSelection: function(element, callback) {
            saved && callback(saved);
        },
        ajax: {
            url: url,
            dataType: 'json',
            data: …

我将 select2 用于多重选择器。目前这是在我的 HTML 文件中：

 <%= form.select "page_request_set_ids", @multiautocomplete_set_options.unshift(""),
 {}, id: "page-request-sets", multiple: true,
 allowClear: true, data: {placeholder: "Start typing sets..."} %>

@multiautocomplete_set_options是一个字符串数组。当我:page_request_set_ids稍后访问时，我输入的字符串和一个空字符串都在那里。

我试图删除unshift("")，它保留了我的占位符，但没有删除:page_request_set_ids.

有任何想法吗？

我正在做的事情：当模式弹出窗口打开时，动态地将选项添加到选择框。并等待on change触发器响应。

观察：它会弹出除第一个选项之外的所有选项的警报框。下面是代码。

$("#query_product").on("change", function(e){
  alert(1)
});

$("#add_condition_modal").on( "shown.bs.modal", function() {
  options = ['<option>one</option>','<option>two</option>','<option>three</option>']
  $('#query_product').find('option').remove()
  $('#query_product').append(options); 
});

<select id="query_product" name="query_product" required></select>

另一个观察结果：当我用相同的选项预填充 html 选择框，然后选择第一个选项或任何选项时，我会看到警报弹出窗口。现在我很困惑。

我尝试使用事件委托来动态添加元素。

$(document).on("change","#query_product", function() {

似乎什么都不起作用。任何帮助将不胜感激。TIA

我的问题是,我有,例如,Product,Category和ProductCategory.ProductCategory使产品具有多个类别

我想使用select2-rails gem(https://github.com/argerim/select2-rails)使用Select2(http://ivaynberg.github.io/select2/)实现这一点.

我已经知道如何关联模型,但我无法弄清楚如何实现Select2特定代码.

编辑:现在我看到我的问题不是关于select2,所以我添加了这个评论并改变了标题,希望它可以帮助别人

我正在使用select2 jquery gem.我正在尝试获取与用户输入内容相匹配的主题列表.它没有按预期工作,我花了一整天时间试图找出原因.我一直在控制台中收到此错误

Uncaught TypeError: Cannot call method 'toUpperCase' of undefined select2.js?body=1:363
Uncaught TypeError: Cannot call method 'localeCompare' of undefined 

第二个错误链接到此行上的js文件

return this.text.localeCompare(term) === 0;

有什么我做错了吗？提前致谢.

我的路线:

get '/topic/topic_list' => 'topic#topic_list'

在我的Topic控制器中,我有:

def topic_list
    @topics = Topic.order(:name)
    respond_to do |format|
        format.html
        format.json { render json: @topics.where('name like ?', "%#{params[:q]}%") }
    end
end

主题js文件

$(function () {
    $('#story_topic_list').select2({
        tags: true,
        width: '100%',
        tokenSeparators: [","," "],
        createSearchChoice: function(term, data) {
        if ($(data).filter(function() {
              return this.text.localeCompare(term) === 0;
            }).length === 0) {
              return …

我能够让 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 …

我现在为此苦苦挣扎了一天，可能真的很容易解决。

我想要的是只接受数字的搜索字段，所以我尝试了这样的事情：

function onlyNumbers(){
  $('.select2-search__field').on('keypress', function () {
    $(this).val($(this).val().replace(/[^\d].+/, ""));
    if ((event.which < 48 || event.which > 57)) {
      event.preventDefault();
    }
  });
}

function select2(){
  $(".select2From").select2({
    tags: true,
    placeholder: "de",
    allowClear: true
  });
  $(".select2To").select2({
    tags: true,
    placeholder: "até",
    allowClear: true
  });
}

但这不起作用……实际上我什至无法访问'.select2-search__field'. 是否在按键、更改、点击、某些东西上都无关紧要......我只想知道如何获得该输入，以便我可以过滤输入中的文本。

希望您能够帮助我。谢谢！

我正在尝试测试一个示例Rails应用程序以使用select2 gem.我已经在select2-rails之后安装了gem .

但是,不幸的是我收到以下错误:

Sprockets::FileNotFound in Home#index

Showing /Users/Rakib/Desktop/Development/TEST_PROJECTS/selecttest/app/views/layouts/application.html.erb where line #5 raised:

couldn't find file 'select2'
  (in /Users/Rakib/Desktop/Development/TEST_PROJECTS/selecttest/app/assets/stylesheets/application.css:14)
Extracted source (around line #5):

2: <html>
3: <head>
4:   <title>Selecttest</title>
5:   <%= stylesheet_link_tag    "application", :media => "all" %>
6:   <%= javascript_include_tag "application" %>
7:   <%= csrf_meta_tags %>
8: </head>
Rails.root: /Users/Rakib/Desktop/Development/TEST_PROJECTS/selecttest

我的Gemfile是:

source 'https://rubygems.org'

gem 'rails', '3.2.8'
gem 'sqlite3'

group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'uglifier', '>= 1.0.3'
end

gem …

我正在使用带有Rails和Mongoid的Select2,我在服务器端有Sunspot Solr来进行搜索.我正在尝试的是通过solr从mongo过滤数据,通过ajax请求获取数据并根据父子层次结构对结果进行分组.我无法弄清楚的是当我搜索一个孩子时,如果有多个子结果,则父类别会多次出现.请阅读以下内容了解更多信息:

这是我在Mongo DB中的数据

{"_ id":ObjectId("5209eb465a721ae827c661de"),"title":"BinaKanalizasyonTesisatı","parent":"SuTesisatçılığı","path":"sutesitati/kanalizasyon"}

{"_ id":ObjectId("5209eb465a721ae827c661df"),"title":"Daire TemizSuTesisatı","parent":"SuTesisatçılığı","path":"sutesisati/temizsu"}

{"_ id":ObjectId("5209eb465a721ae827c661e0"),"title":"Musluk Tamiri","parent":"SuTesisatçılığı","path":"sutesitati/musluktamiri"}

这是我的Rails模型

class Category
  include Mongoid::Document
  include Sunspot::Mongoid2

  searchable do
    text :title 
  end

  field :title, :as => :title_textp
  field :parent
  field :path  
end

这是我的Rails控制器

class CategoriesController < ApplicationController
  respond_to :html, :json

  def list_styles 
      search = Category.search do
        fulltext params[:q]
      end
      search = Category.search { keywords params[:q]; paginate :page => params[:page], :per_page => params[:page_limit] }
      @results = search.results
      @total_lines = search.total
      @categories = @results    
     respond_with @categories 
  end 

end

这是我的Haml View …