select2 дисплей по умолчанию (статический) и делать ajax поиск, если не найден

Question

У меня есть select2 v4 со статическим выбором (100 опций). Когда пользовательский ввод не найден в списке параметров по умолчанию, мне нужно выполнить ajax-поиск.

Поскольку я не смог использовать один и тот же объект select, я использую другой для поиска 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

Answer 1

меня разрешить множественный вариант приложенный к default_select, делая выбор в ajax_select (new_select). Проблема заключалась в функции formatSelection formatNewSelection, я заменил ее select2: select event.

Код для 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'); 

}); 

Это еще не самый лучший кусок кодирования, но он работает в настоящее время. Любая помощь по улучшению этого будет в основном оценена.