select2 Anzeige Standardoption (statisch) und tun Ajax Suche, wenn nicht gefunden

Question

Ich habe select2 v4 mit einer statischen Auswahl (100 Optionen). Wenn die Benutzereingabe nicht in der Liste der Standardoptionen gefunden wird, muss ich eine Ajax-Suche durchführen.

Da ich nicht in der Lage war, das select select-Objekt zu verwenden, verwende ich einen anderen für die Ajax-Suche. Also verstecke ich die Standardauswahl und ersetze sie mit dem Ajax_select. Mache die Ajax-Suche.

Code:

<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> 

Definitiv nicht der beste Weg, es zu tun, aber ich habe nur ein Problem. Wenn ich ein Element im ajax_select auswähle, um es an den Standard anzuhängen, wähle es die gleiche Option viermal aus. Kann mir jemand sagen, warum und gibt es einen besseren Weg, es zu tun?

Danke, Salain

Answer 1

Ich habe die mehrere Option lösen angefügt default_select, wenn eine Auswahl in ajax_select (new_select) zu machen. Das Problem war mit der templateSelection-Funktion formatNewSelection, die ich durch select2: select event ersetzt habe.

-Code für 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'); 

}); 

Das ist noch nicht das beste Stück Codierung, aber es funktioniert jetzt. Jede Hilfe zur Verbesserung dieses würde meist geschätzt.