标签: jquery-select2

我正在使用带有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 …

我正在使用select2来构建带有延迟附加结果列表的选择框。但是，分页数据（例如总项目数）不是 JSON 响应的一部分。因此，我无法在ajax.results函数中访问它们。相反，分页数据是 HTTP 响应标头的一部分。

select2的ajax中是否内置了某种拦截机制，以便我可以访问HTTP标头并将它们写入实际结果数据中？

我读取总是触发"更改" - <select>的事件,即使已经选择了单击的select2选项,并且因为问题非常接近我的问题,我在那里问了我的问题,但没有提供答案.我的问题是我有一个由Select2构造的选择框和一个文本输入.我想要实现的是在Select2关闭后(无论值是否更改)我的文本输入变为焦点.

所以我做了一些逻辑上很好的事情如下:

$('#select').select2({placeholder: 'City'});
$('#select')
.on('select2-close', function (e) {
   $('#hey').focus();
});

http://jsfiddle.net/sobhanattar/x49F2/8/

如您所见,文本输入不接受焦点.在对Select2文档进行一些挖掘并检查文档的事件部分后,我意识到在Close事件之后,会自动触发Focus事件.这意味着在关闭Select2选择框后,它会自动聚焦.所以我将代码更改为:

$('#select').select2({placeholder: 'City'});
$('#select')
.on('select2-close', function (e) {
       $('#select').blur();
})
.on('select2-blur', function(e) {
      $('#hey').focus();
});

它工作得很好.现在我想知道我对Select2事件顺序的理解是正确的还是我错过了中间的东西.

鉴于以下coffeescript

class ModalController
  constructor: (modalClass) ->
    @modalClass = modalClass
    @enableSelect2()
    @clearSelectOptions()

  enableSelect2: () ->
    $('.select2-init').select2()
      .on 'select2-open', (e) ->
        console.log e
      .on 'select2:selecting', (e) =>
        console.log 'added'
        @validatePresenceOf($(e.target))

我希望当我选择上面的代码时,特别是线路调用.on 'select2:selecting应该触发,这不是原因,如下面的代码片段所示.

我基于select2文档对此有所了解

怎么解决这个？

在事件选择中可能会出错

以下coffeescript

  enableSelect2: () ->
    $('.select2-init').select2()
      .on 'change', (event) =>
        if event.added
          @validatePresenceOf($(event.target))
      .on 'select2:selecting', (e) =>
        console.log "selecting"
      .on 'select2:select', (e) =>
        console.log "select"
      .on 'select2-removed', (e) =>
        @validatePresenceOf($(e.target))

产生以下内容,请注意没有日志声明(虽然我已经通过使用event.added支票破解了我正在寻找的验证.

模式select2:eventname没有做任何事情,即没有记录,没有钩子.这很奇怪.我select2-eventname在互联网上找到的随机网站上找到了这种模式.这对我来说是非常奇怪和令人不安的,这看起来像是一个简单的代码.

我从这里举个例子.

我尝试在我的localhost中这样:

<select id="e1" style="width:300px">
    <option value="AL">Alabama</option>
    <option value="Am">Amalapuram</option>
    <option value="An">Anakapalli</option>
    <option value="Ak">Akkayapalem</option>
    <option value="WY">Wyoming</option>
</select>


<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css"></script>

<script type="text/javascript">
    $('#e1').select2({

    });
</script>

但它不起作用

结果是这样的:

解决我的问题的任何解决方案？

谢谢

我想尝试一个非常基本的select2工作示例,但我遇到了问题.我的控制台中没有错误说select2遇到错误,但测试选择框只显示默认值.

<head>
    <link rel="stylesheet" href="~/Content/css/select2.css" />
    <script src="~/Scripts/jquery-2.2.1.js"></script>
    <script src="~/Scripts/select2.js"></script>
    <script type="text/javascript">
        $("#sel").select2();
    </script>
<head>
<body>
    <select id="sel">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
    </select>
<body>

有什么东西我只是没有看到？

• 我正在使用从nuget下载的select2 4.0.2,是否有一个"更好"的版本？

我有一个元素是动态的形式。我们可以根据需要添加一行。这是一个图片链接 动态表格

如我们所见，我们可以添加一行，只需按“tambah kolom”按钮，然后该行将附加到表单中。我使用 jquery 添加动态。这是我的表单代码

HTML

<tr>
        <td>
            <input type="number" class="form-control" value="{{ old('itemujiriksa[0][jumlah_barang]') }}" name="itemujiriksa[0][jumlah_barang]">
        </td>                
        <td>
            <input type="text" class="form-control" value="{{ old('itemujiriksa[0][nama_barang]') }}" name="itemujiriksa[0][nama_barang]">
        </td>
        <td class="form_tabung">
            <select name="itemujiriksa[0][tube_id]" class="form-control tube" style="width: 100%">
            </select>
        </td>
        <td class="form_alat" style="display:none">
            <select name="itemujiriksa[0][alat_id]" class="form-control alat" style="width: 100%">
            </select>
        </td>
        <td>
            <input type="text" class="form-control" value="{{ old('itemujiriksa[0][keluhan]') }}" name="itemujiriksa[0][keluhan]">
        </td>
        <td>
            <input type="file" class="form-control" value="{{ old('itemujiriksa[0][fototabung][]') }}" name="itemujiriksa[0][fototabung][]" multiple />
        </td>
    </tr>

这是我的 jquery 代码

查询

<script>
$(document).ready(function() {
var max_fields      = 10; //maximum …

我是这样创建Select2的：

function SetSelect(obj, placeholder, url) {
    obj.select2({
        placeholder: placeholder,
        theme: "bootstrap",
        language: "es",
        ajax: {
            url: url,
            dataType: "json",
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {
                // parse the results into the format expected by Select2
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data, except to indicate that infinite
                // scrolling can be used
                params.page = …

我使用 jQuery select2 来选择多个列表项。

但不幸的是，下面的代码必须将所有 3 个值都加载到选择字段中。但是它只加载第一个项目。

如何将所有 3 个项目加载到 select2 列表中？

<head>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
    <select id="e1" style="width:400px">
        <option value="AL">Alabama</option>
        <option value="NY">New york</option>        
        <option value="WY">Wyoming</option>
    </select>
    <script>
    var selectedValuesTest = ["WY","AL", "NY"];
    $(document).ready(function() {
        $("#e1").select2({
                multiple: true,
            });
            $('#e1').select2('val', selectedValuesTest);
    });
    </script>    
</body>

我知道我可以更改optionslot的模板，但是我们可以对 label slot 做同样的事情吗？喜欢option：

  <v-select inputId="originsId" :options="origins" label="city" placeholder="Search...">
    <template slot="option" slot-scope="origin">
      <div class="flex">
        <div class="col">
          <span>{{ origin.city }}</span>
        </div>
        <div class="col">
          <span>{{ origin.country }}</span>
        </div>
      </div>
    </template>
  </v-select>

选择选项时，有什么方法可以设置标签的样式吗？现在它只显示label="city"值。我需要类似的东西：

  <v-select inputId="originsId" :options="origins" label="city" placeholder="Search...">
    <template slot="label" slot-scope="origin">
      <div class="flex">
        <div class="col">
          <span>Selected city: {{ origin.city }}</span>
        </div>
        <div class="col">
          <span>Selected country: {{ origin.country }}</span>
        </div>
      </div>
    </template>

    <template slot="option" slot-scope="origin">
      <div class="flex">
        <div class="col">
          <span>{{ origin.city }}</span>
        </div>
        <div class="col">
          <span>{{ origin.country …