I have a working select2 implementation on this jsfiddle . It enables a search for Github repo's and returns the results so they can be selected by the user. If only 1 repo matches a given search it will be auto-selected.
I need to be able to pre-fill my select2 form with some default options. As stated in the docs I should be able to do something like this:
<select id='select2_element' multiple='multiple' style='width:100%;'>
<option value="easypr-ja" selected="selected">EasyPR-Java 70 32393764</option>
</select>
When I press the console.log all selected data
button I can see that the id
and text
of my pre-filled repo is accessible, but in the browser, the above pre-filled option gets displayed as undefined undefined easypr-ja
.
What do I need to do in order to get the value of the default option displayed properly?
My implementation is doing some custom formatting as shown here:
var createRepo, formatRepo, formatRepoSelection, selectRepos;
formatRepoSelection = function(element) {
return element.name + ' ' + element.forks + ' ' + element.id;
};
formatRepo = function(element) {
var markup;
if (!element.loading) {
return markup = element.name + ' ' + element.id;
}
};
createRepo = function() {
$(".btn-create-repos").off("click");
return $(".btn-create-repos").click(function(e) {
var el, element_ids;
el = $(e.currentTarget);
element_ids = $("#select2_element").select2('data');
return console.log(element_ids);
});
};
selectRepos = function() {
var option, select2_element;
select2_element = $('#select2_element');
select2_element.select2({
placeholder: "Type in 'easypr-ja' to get only 1 result",
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, params) {
if (data.items.length === 1) {
setTimeout(function() {
$("#select2-select2_element-results li:first-child").trigger('mouseup');
}, 0);
return {
results: data.items
};
} else {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
}
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
},
minimumInputLength: 2,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
};
$(function() {
selectRepos();
return createRepo();
});
Please follow below example with form_for, It may be helpful
<%= f.select(:categories, Category.all.collect {|c| [c.name, c.id]}, {}, id: "event_categories", :multiple => true) %>
<script type="text/javascript">
$("#event_categories").select2();
<% if @event.id.present?%>
$("#event_categories").val(<%= @event.categories.collect(&:id)%>).change()
<% elsif params[:action]=="create" || params[:action]=="update" %>
$("#event_categories").val(<%=params[:event][:categories].map(&:to_i).drop(1)%>).change()
<% end %>
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.