Select2 не загружает данные

Question

Я недавно обновился до Rails 5.2 и ruby ​​2.5.1, и мой блок выбора перестал работать.

Мне пришлось изменить файл реквиера в моем admin.js и добавить полную версию, чтобы даже просмотреть поле выбора

//= require select2-full

но теперь запрос ajax для получения данных или даже первоначального выбора не отображает никаких результатов. Я использую Gon для передачи данных на мой js, и я проверил, что gon имеет правильные значения. Мой js.coffee выглядит следующим образом:

clientFormatResult = (client) ->
  client.email

clientFormatSelection = (client) ->
  client.email

$ ->
  $select_input = $('#publish_to')
  $select_input.val(' ')
  $select_input.select2({
    width: '420px'
    height: 'auto'
    placeholder: "Search"
    minimumInputLength: 2
    multiple:true
    closeOnSelect: true
    tokenSeparators:[',',' ']
    ajax: {
      url: $select_input.data('search-endpoint')
      data: (term, page) ->
        {
          q: term # search term
          page_limit: 10
        }
      results: (data, page) -> # parse the results into the format expected by Select2.
        console.log("result")
      # since we are using custom formatting functions we do not need to alter remote JSON data
        results: data.manage_clients
      }
    initSelection: (element, callback) ->
      callback(gon.published_to)
    formatResult: clientFormatResult
    formatSelection: clientFormatSelection
  })

Моя конечная точка поиска контроллера:

def search
    clients = Client.where("email like '%#{params[:q]}%'").map { |c| { :id => c.id, :email => c.email } }
    render :json => clients
  end

private
  def client_params
    params.require(:client).permit(:email, :password, :password_confirmation, :first_name, :last_name, :organisation, :assigned_team)
  end

Результат поиска конечной точки:

{
"manage_clients": [
{
"id": 46,
"email": "aaaa@example.net"
},
{
"id": 365,
"email": "bbbb@example.org"
}
]
}

Извлечение исходного кода представления, где выбранный ввод:

<div class="input string required publish_to">
<label class="string required control-label" for="report_clients">
Publish to
</label>
<input data-search-endpoint="/my-endpoint-search" id="publish_to" name="publish_to" type="hidden" value="" multiple="" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true"><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 420px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1"><ul class="select2-selection__rendered"><li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Search for a client" style="width: 418px;"></li></ul></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
<div>
<a class="add_button button" href="/some_url">Action</a>
</div>
</div>

Я попробовал решение , предложенное здесь изменения контроллера response_to но без изменений. Я также попытался добавить dataType: 'json' к вызову ajax, как предложено здесь Добавление .select2('val',[]) в конце первого select2 Я пытался вручную добавить { id: '1', text:'example' } к initSelection Я не получаю никакой ошибки в консоли

Но вызов ajax, похоже, не работает. В консоли нет вызовов к конечной точке поиска.

Answer 1

Проблема была в том, что я использовал select2 4.0 и код был разработан для 3.5

Мне пришлось изменить свой ввод для выбора и добавить туда атрибут множественного = "несколько" вместо того, чтобы объявлять его как часть опций select2. Это было главное изменение, чтобы заставить это работать. После нескольких настроек мне пришлось изменить форматер initSelection и изменить результаты ajax с результатов на processResults. Окончательный код такой:

%select#publish_to{ :name => 'publish_to', :multiple => 'multiple', :type => 'hidden', "data-lookup-endpoint" => my_endpoint_path }

И кофейный текст:

formatValues = (values) ->
  data = []
  i = 0
  while i < values.length
    data.push
      id: values[i].id
      text: values[i].email
    i++
  data

$ ->
  $select_input = $('#publish_to')
  $select_input.val('')
  $select_input.select2({
    placeholder: 'Search for a Client'
    width: '420px'
    height: 'auto'
    data: formatValues(gon.published_to)
    allowClear: true
    minimumInputLength: 2
    tokenSeparators:[',',' ']
    ajax: {
      url: $select_input.data('lookup-endpoint')
      dataType: 'json'
      data: (term, page) ->
        {
          q: term # search term
        }
      processResults: (data, page) -> # parse the results into the format expected by Select2.
      # since we are using custom formatting functions we do not need to alter remote JSON data
        results: formatValues(data.manage_clients)
      }
  })
  # To set initial values:
  $('#publish_to').val(getIds(gon.published_to)).trigger 'change'

контроллер, изменил параметр с [:q] на [:q][:term]:

def search
    clients = Client.where("email like '%#{params[:q][:term]}%'").map { |c| { :id => c.id, :email => c.email } }
    render :json => clients
  end