Wie können wir die ID ausgewählter Tags mit Jquery Tagit abrufen?

Question

Ich habe ein Eingabe-Tag-Feld und möchte die ID der ausgewählten Tage erhalten Also habe ich es versucht http://jsfiddle.net/u8zj5/19/ Aber mein Problem, ich möchte die ID nicht beschriften oder Wert, an den übergeben werden soll id="show" aber ich habe versagt.

<input type="text" id="field1" name="field1" value=""/>
<span id="show">show ID here</span>

jQuery(document).ready(function(){
var availableTags = [{"id":"144","label":"Allicelabel","value":"Allice value"}];
jQuery("input#field1").each(function(){
    var target = jQuery(this);
    var currenttags = target.val();
    target.hide()        
          .after("<ul class=\"tags\"><li>"+currenttags+"</li></ul>");
    var instance = target.next();
    instance.tagit({
        tagSource:availableTags,
        tagsChanged:function () {
            var tags = instance.tagit('tags');
            var tagString = [];
            for (var i in tags){
                tagString.push(tags[i].value);
            }
            $("#show").html(tagString.join(','));
        },
        sortable:true,
        triggerKeys: ['enter', 'comma', 'tab']
    });
});

});

Jeder hier, der benutzt hat jQuery Tagit (Demo-Seite) Könnte mir helfen, das zu lösen

Answer 1

Ich hatte das gleiche Problem und ich habe Tag-it geändert.js.Wenn Sie die Funktion select aufrufen, müssen Sie die senden ID durch die funktion _addTag

self._addTag(ui.item.label, ui.item.value, ui.item.id);

Dann brauchen Sie nur noch die ID zu bekommen:

_addTag: function(label, value, id) {
    ...
    this._addSelect(label, value, id);
    ...
}

Und hier anhängen die ID auf einer versteckten Auswahl

_addSelect: function(label, value, id) {
        var opt = $('<option>').attr({
            'selected':'selected',
            'value':id
        }).text(label);
        this.select.append(opt);

Damit können Sie eine Beschriftung für die Autovervollständigungsliste, einen Wert, der im Tag angezeigt werden soll, und die ID auf einer versteckten Auswahl.

Answer 2

Ich hatte das gleiche Problem, wollte jedoch nicht das Standardverhalten des Plugins ändern.Stattdessen habe ich stattdessen die zur Verfügung gestellten Haken verwendet, um neue Bessehior hinzuzufügen. generasacodicetagpre.

Answer 3

Verwenden Sie ein anderes Plugin wie SELECT2.Es hat tatsächlich Unterstützung dafür bekommen.