The select2 plugin supports auto-completion. You can use the native auto-completion as follows:
<%= 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" }
%>
Javscript
$(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);
}
}
});
});
});
Make sure the action at autocomplete_neighborhood_name_searches_path
returns a json array of hashes. Each hash should contain id
and name
fields. The term for auto-completion is passed via the query parameter 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
Your search model:
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