3

コンテンツにタグを付けるために、Ajax 呼び出しでTag-itを使用しています。tagSourceタグ ラベル自体よりも多くのデータを含める必要があります。たとえば、ラベルとは異なる ID や、タグのタイプなどのメタデータです。Ajax 呼び出しに返されるデータですが、タグ ラベル自体には含めたくないデータです。

jQuery の方法liを使用してアイテムにデータを含めるように Tag-it を変更することもできますが、他の誰かが既にこれを解決している場合、または別のタグ ライブラリを推奨できる場合は、非常に高く評価されます。.data

4

1 に答える 1

3

Tag-it を変更せずにこれを行うための鍵は、オートコンプリート Ajax 呼び出しから返される余分なデータと Tag-it afterTagAdded イベントの間のギャップを埋めることです。

スコープに変数itemDataを追加します。これは、オートコンプリート アイテムからの追加データを格納するために使用されます。

{
    var itemData;

タグ作成動作を呼び出すことができるように、タグ要素への参照を取得します

    var theTags = $('#tags');

    theTags.tagit({

オートコンプリートのイベントを処理selectし、選択したオートコンプリート アイテムからの追加データを保存してから、タグを作成します。

        autocomplete: {
            source: [
                {value:'User Tag',data:{id: 1, type: 'userTag'}},
                {value:'System Tag',data:{id: 2, type: 'systemTag'}}
            ],
            select: function(event,ui) {
                itemData = ui.item.data;
                theTags.tagit("createTag", ui.item.value);
                return false;
            }
        },

afterTagAddedTag-itのイベントを処理します。ここでは、追加したばかりのタグを変更するカスタム動作を実装できます。

        afterTagAdded: function(event, ui) {
            if (itemData) {
                $(ui.tag).data('type', itemData); // store all data
                $(ui.tag).find('input').val(itemData.id); // use a bit of the data
                itemData = null;
            }
        }
    });
}

http://jsfiddle.net/yuhxL/2/で、このソリューションの実例を参照してください。

于 2012-12-14T05:26:31.993 に答える