Select2 占位符在带有 hidden_​​field 的 Rails 应用程序中不起作用

Posted 2023-05-07

【中文标题】Select2 占位符在带有 hidden_​​field 的 Rails 应用程序中不起作用

【英文标题】：Select2 placeholder not working in rails app with hidden_field

【发布时间】：2015-07-18 21:55:23

【问题描述】：

哈姆：

 .form-group
            = f.hidden_field :gender, :id => 'select2', :style => "width:100%; height: 40px"

JS：

 $("#select2").select2(
    createSearchChoice: function (term, data) 
      if ($(data).filter(function () 
            return this.text.localeCompare(term) === this.text;
          ).length === 0) 
        return 
          id: term,
          text: term
        ;
      
      console.log('SELECT2', $("#select2").data.text);
    ,
    placeholder: "Enter custom gender or select one below",
    multiple: false,
    data: [
      id: 'male',
      text: 'male'
    , 
      id: 'female',
      text: 'female'
    , 
      id: 'custom',
      text: 'custom'
    ]
);

Select2 正在做我现在需要的一切，但占位符没有显示在我的视图中。任何帮助，非常感谢。

【参考方案1】：

我为此编写了一个小咖啡脚本，它完成所有正常的自动完成事情以及预填充数据

$(document).ready ->
  $('.select2').each (i, e) =>
    select = $(e)
    options =
      placeholder: select.data('placeholder')
      minimumInputLength: 1

    if select.hasClass('ajax') # only add ajax functionality if this class is present
      options.ajax =
        url: select.data('source')
        quietMillis: 100
        dataType: 'json'
        data: (term) ->
          q: term
        results: (data) ->
          results: data.resources
          more: false

      options.dropdownCssClass = "bigdrop"
      options.initSelection = (element, callback) ->
        callback( text: element.attr('data-value') )
    select.select2(options)

而我的隐藏域是这样的

hidden_field_tag(:search, '', id: 'res_select', class: 'select2 ajax form-control select-overide', style: 'width: 100%;', data:  source: "/products/autocomplete", placeholder: 'Search for a name' , :value=> params["search"], "data-value" => params['search'])

试试这个吧。

【参考方案2】：

这是一个很好的答案。我通过添加占位符填充的空白初始选项，用更少的代码解决了这个问题：

 $('.compare-search').prepend('<option/>').val(function()return $('[selected]',this).val() ;);