select2: Wie werden vorgefüllte Optionen für den Benutzer richtig angezeigt?

Question

Ich habe eine funktionierende select2 Implementierung auf this jsfiddle. Es ermöglicht die Suche nach Github-Repos und gibt die Ergebnisse zurück, so dass sie vom Benutzer ausgewählt werden können. Wenn nur 1 Repo mit einer bestimmten Suche übereinstimmt, wird diese automatisch ausgewählt.

Ich muss mein select2-Formular mit einigen Standardoptionen füllen können. Wie in the docs angegeben soll ich in der Lage sein, so etwas zu tun:

<select id='select2_element' multiple='multiple' style='width:100%;'> 
    <option value="easypr-ja" selected="selected">EasyPR-Java 70 32393764</option> 
</select> 

Wenn ich die console.log all selected data Taste drücken kann ich sehen, dass die id und text meine vorgefüllten Repo zugänglich ist, aber im Browser, die Die oben aufgeführte Option wird als undefined undefined easypr-ja angezeigt.

Was muss ich tun, damit der Wert der Standardoption korrekt angezeigt wird?

Meine Implementierung einige benutzerdefinierte Formatierung tut wie hier gezeigt:

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(); 
}); 

Answer 1

Bitte unten Beispiel folgen mit form_for, kann es hilfreich sein

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