Editor combo with List source

For the question: http://stackoverflow.com/questions/19331301/listitems-not-working-when-base-element-is-input-in-igeditor about Ignite UI jQuery Editors

by damyanpetev

HTML

<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<p> Dinamically adding Ignite UI Editors: </p>

JavaScript

$.ig.loader({
    scriptPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/js/',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/css/',
    theme: 'metro',
    resources: "igEditors"
});

$.ig.loader(function () {
    //esiest solution, attach to DOM first:
    var input = $('<input class="EditorFields" id="textfield"/>').appendTo("body");
    $(input).igEditor({
        width: 140,
        required: true,
        listItems: ["red", "blue", "yellow"],
        button: "dropdown"
    });
        
    // You provide the container SPAN instead :
    var input1 = $('<span class="EditorFields" id="textfield1"/>');
    $(input1).igEditor({
        width: 140,
        required: true,
        listItems: ["red1", "blue1", "yellow1"],
        button: "dropdown"
    }).appendTo("body");
    
    // this, because it selects the parent to attach, will only work with INPUT provided for complex editor
    var input2 = $('<input class="EditorFields" id="textfield2"/>');
    $(input2).igEditor({
        width: 140,
        required: true,
        listItems: ["red2", "blue2", "yellow2"],
        button: "dropdown"
    }).parent().appendTo("body");
});