我有select2 v4静态选择(100个选项)。 当在默认选项列表中找不到用户输入时,我需要进行ajax搜索。
由于我无法使用相同的选择对象,因此我使用了不同的ajax搜索。 所以我隐藏了默认选择并用ajax_select替换。 做ajax搜索。
代码:
<script type="text/javascript">
var s2_search =''; //global var for search string
$("#default_select").select2({
placeholder: "Select an item",
debug: true,
minimumInputLength: 0, // important!!! => without setting to 0 the default data will not be shown
tags:true,
createTag: function (params) {
s2_search = params.term; //assing search string to var
},
templateResult: function(data){
var $result = $("<span></span>");
$result.text(data.text);
return $result;
},
escapeMarkup: function (markup) {
if(markup == 'No results found'){
// item is not found in default activate the ajax select
$('#div_default').addClass('hidden');
$('#div_new').removeClass('hidden');
new_select_func(s2_search)
}
else {
return markup;
}
}
});
var $myselect = $('#new_select').select2({
minimumInputLength: 0,
ajax: {
url: BASE_URL + '/get_more',
dataType: 'json',
cache: true,
delay: 350,
data: function (params) {
return {
q: params.term//, // search term
};
},
processResults: function (data, params) {
if(data === false){
// if the item is not found in the database display a modal form to insert the item
// This works
$.get(BASE_URL+'/get_new_form',{plate: params.term}, function (data) {
$('#myModal').find('.modal-body').html(data);
});
$('#myModal').modal('show');
}
else {
return {
results: data
};
}
}
},
templateSelection: formatNewSelection
});
function formatNewSelection(data, container) {
// append the new item to the default select
$("#default_select").append($('<option>', {value: data.id, text: data.text}));
//restore default select
$('#div_default').removeClass('hidden');
// hide new select
$('#div_new').addClass('hidden');
return data.text;
}
function new_select_func(search_val) {
//close default select
$("#default_select").select2("close");
//open new select
$myselect.select2('open');
// set search string and trigger ajax search
var $search = $myselect.data('select2').dropdown.$search || $myselect.data('select2').selection.$search;
$search.val(search_val);
$search.trigger('keyup');
}
</script>
绝对不是最好的方法,但我只有一个问题。当我在ajax_select中选择一个项目以将其附加到默认选择时,它会创建相同的选项4次。 任何人都可以告诉我为什么,还有更好的方法吗?
谢谢你, Salain
答案 0 :(得分:0)
在ajax_select(new_select)中进行选择时,我已解决附加到default_select的多个选项。问题在于templateSelection函数formatNewSelection,我用select2:select事件替换了它。
new_select的代码:
var $myselect = $('#new_select').select2({
minimumInputLength: 0,
ajax: {
url: BASE_URL + '/get_more',
dataType: 'json',
cache: true,
delay: 350,
data: function (params) {
return {
q: params.term//, // search term
};
},
processResults: function (data, params) {
if(data === false){
// if the item is not found in the database display a modal form to insert the item
// This works
$.get(BASE_URL+'/get_new_form',{plate: params.term}, function (data) {
$('#myModal').find('.modal-body').html(data);
});
$('#myModal').modal('show');
}
else {
return {
results: data
};
}
}
}
// the Selection template and function are not needed using default format
//,templateSelection: formatNewSelection
});
$myselect.on("select2:select", function(e) {
// append the new item to the default select
$("#default_select").append($('<option>', {value: e.params.data.id, text: e.params.data.text}));
//restore default select
$('#div_default').removeClass('hidden');
// hide new select
$('#div_new').addClass('hidden');
});
这仍然不是最好的编码,但它现在有效。 任何改善这方面的帮助都会受到赞赏。