Mit jQuery Tags in Box einfügen?

Question

Was ich erstellen möchte, ist etwas wie der Stack-Überlauf-Tag-Einsatz. Ich möchte in der Lage sein, das Tag in die Einfüge-Box einzugeben, und wenn ich auf die Schaltfläche "Hinzufügen" klicke, wird es in die obige Box eingefügt. Ich möchte auch, dass das neue Tag in das Array 'SelectedTags' geschoben wird. Wenn der Benutzer es aus der Box entfernt, muss es aus dem Array entfernt werden. Ich denke, ich müsste zuerst in das Array drücken und dann die Box basierend auf dem Array-Inhalt auffüllen? Ich habe versucht, es in JSFiddle zu erstellen, aber es funktioniert nicht. Kann jemand beim Verwenden des JSFiddle-Beispiels helfen? http://jsfiddle.net/uVxXg/117/

Ich nehme an, das ist es, was es wie ein Tag aussehen?

$("#tags").tagit({ 
    availableTags: SelectedTags 
}); 

Answer 1

Dies ist, wie Sie es tun:

$(document).ready(function() { 
    var sampleTags = []; 

    $('#tags').tagit({ 
    availableTags: sampleTags, 
    afterTagRemoved: function(evt, ui) { 
    console.log(ui.tagLabel) 
     for(var i = 0; i < sampleTags.length; i++) { 
     if (sampleTags[i] == ui.tagLabel) { 
      sampleTags.splice(i, 1); //Here is the update 
     } 
     } 
    } 
    }); 

    $('form').submit(function(e) { 
    var inp = $('#tagInput').val(); 
    $('#tagInput').val(''); 
    $('#tags').tagit('createTag', inp); 
    sampleTags.push(inp); 
    e.preventDefault(); 
    console.log(sampleTags) 
    }); 

    $("#array").click(function(e){ 
    console.log("MyArray",sampleTags) 
    }) 
}); 

Versuchen Sie, die fiddle aus, und wenn man etwas zum SelectedTags Array hinzuzufügen können, müssen Sie dann die Tags wie in den Tags „Wile type“ Eingang.