jQueryタグを使用して選択したタグのIDを取得する方法は？

Question

入力タグフィールドを持ち、選択したテージのIDを取得したい だから私は jQuery Tagit（デモページ）このを解決するのを手伝ってください

Answer 1

私は同じ問題を抱えていました、そして私はtag-it.jsを修正したのです。 関数を呼び出すと、関数ID を介して_addTagを送信する必要があります。

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

.

それからあなたはIDを取得する必要があるだけです：

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

.

およびここでは、隠し選択にIDを追加します。

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

.

オートコンプリートリストの1つのラベル、タグに表示する1つの値、および隠し選択のIDを持つことができます。

Answer 2

私は同じ問題を抱えていましたが、プラグインのデフォルトの動作を変更したくありませんでした。それで、代わりに、私は提供されたフックを使用して新しいBhoviviorを追加しました。

var availableTags = [
    {
        label: "myTag",
        value: "myTag",
        id: 1
    },
    //etc...
];
var assignedTags = [];


$('#singleinputfield').tagit( {
                            tagSource: function (request, response) {
                                    //setup the search to search the label
                                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                                    response($.grep(availableTags, function (value) {
                                        return matcher.test(value.label);
                                    }));
                            },
                            beforeTagAdded: function(event, ui){
//get id for that tag and signal if it was in the tagSource list
                                var id, result = false;
                                $.each(availableTags, function(){
                                    if(ui.tagLabel === this.label){
                                        result = true;
                                        id=this.id;
                                        return false;
                                    }
                                });
                                if(result){
//put id in the list of ids we are using
                                    assignedTags.push(id);
                                }
                                return result;
                            },
                            afterTagAdded: function(event, ui){
//replace the values in the single input field with the assigned ids
                                    $('#singleinputfield').val(assignedTags.join(','));
                            },
                            afterTagRemoved: function(event, ui){
                                $('#singleinputfield').val(assignedTags.join(','));
                            },
                            beforeTagRemoved: function(event, ui){
                                var id;
//get the id for the removed tag and signal if it was in the tagSource list
                                $.each(availableTags, function(){
                                    if(ui.tagLabel === this.label){
                                        result = true;
                                        id = this.id;
                                        return false;
                                    }
                                });
                                if(result){
//remove the unassigned tag's id from our list
                                    assignedTags = $.grep(assignedTags, function(el){
                                        return el != id;
                                    });
                                }
                            }
                        });

.

Answer 3

SELECT2のような他のプラグインを使用してください。それは実際にこれをサポートしています。