Как использовать select2-rails с простой формой?

этой select2 библиотека jquery выглядит потрясающе. Есть рейлинги но это очень легко на документации. Я хотел бы создать простое множественное раскрывающееся меню, используя автозаполнение. Как мне это сделать?

это мой вызов 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-rails камень, но не совсем уверен, как заставить его работать.

я добавляю это к моему :

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

и получаю эту ошибку:

Uncaught query function not defined for Select2 selectWhereToLive 

мысли?

Edit 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-Обновлено

как предложил @moonfly, я попытался добавить as: :select до f.input_field С as: :autocomplete включено и не включенный.

полученный HTML без as: :autocomplete было так:

<input name="search[neighborhood_names][]" type="hidden" value="" /><select class="select optional span8" data-delimiter="," data-placeholder="Where do you want to live?" id="selectWhereToLive" multiple="multiple" name="search[neighborhood_names][]" url="/searches/autocomplete_neighborhood_name"><option value="true">Yes</option>
<option value="false">No</option></select>

он предварительно заполняет 2 значения опции " да " и "нет". Не знаю почему, но так оно и есть.

обновление

поэтому я изменил селектор jquery, чтобы искать input#ID, и забыл. Поэтому я установил это обратно, и теперь он генерирует поле выбора - но он дает мне эти 2 да и нет вариантов. Не совсем понимаю, зачем он это делает. Он не возвращает значения из my

3 ответов


плагин select2 поддерживает автодополнение. Вы можете использовать собственное автозаполнение следующим образом:

<%= f.input_field :ac_neighborhood_ids, 
      data: { 
        placeholder: "Where do you want to live?",
        saved: @search.neighborhoods.to_json,
        url: autocomplete_neighborhood_name_searches_path
      }, 
      input_html:  { class: "span8 ac-select2" }
%>

контрактной работе с разными компаниями

$(document).ready(function() {  
  $('.ac-select2').each(function() {
    var url = $(this).data('url'); 
    var placeholder = $(this).data('placeholder'); 
    var saved = jQuery.parseJSON($(this).data('saved'));
    $(this).select2({
      minimumInputLength: 2,
      multiple: true,
      placeholder : placeholder,
      allowClear: true,
      ajax: {
        url: url,
        dataType: 'json',
        quietMillis: 500,
        data: function (term) {
          return {
            name: term
          };
        },
        results: function (data) {
          return {results: data};
        }
      },

      formatResult: function (item, page) {
        return item.name; 
      },

      formatSelection: function (item, page) {
        return item.name; 
      },

      initSelection : function (element, callback) {
        if (saved) {
          callback(saved);
        }
      }

    });
  });
});

убедитесь, что действие в autocomplete_neighborhood_name_searches_path возвращает массив хэшей json. Каждый хэш должен содержать id и name поля. Термин для автоматического завершения передается через параметр query name.

  def autocomplete_neighborhood_name
    @neighborhood = Neighborhood.select("id, name").where("name LIKE ?", "#{params[:name]}%").order(:name).limit(10)

    respond_to do |format|
      format.json { render json: @neighborhood , :only => [:id, :name] }
    end    
  end

поиск модели:

class Search

  attr_accessor :ac_neighborhood_ids

  has_many :search_neighborhoods
  has_many :neighborhoods, through: :search_neighborhoods

  def ac_neighborhood_ids
    neighborhood_ids.join(",")
  end

  def ac_neighborhoods
    neighborhoods.map{|n| {:id => n.id, :name => n.name}}
  end

  def ac_neighborhood_ids=(ids)
    search_neighborhoods.clear # remove the old values
    ids.split(',').select(&:present?).map do |neighborhood_id|
      search_neighborhoods.build neighborhood_id: neighborhood_id
    end
  end

end    

Я считаю, что вам нужно прикрепить select либо для выбора тега (затем он считывает данные из него), либо для ввода скрытого тега, тогда вам нужно предоставить функцию "запрос". В вашем случае он прикреплен к тегу ввода и, таким образом, ищет функцию запроса. Попробуйте установить as: :select на f.input_field звонок.


Use as:: select with collection является регулярным способом для select2. Привязка автозаполнения на select2-это вопрос javascript.

Это мой пример кода. но не имеет автозаполнения. https://gist.github.com/kuboon/f692d9a844c0ff5877c8