13

tag-it ui プラグインhttps://github.com/aehlke/tag-it (バージョン v2.0) を変更して、x 個のタグの選択のみを許可する方法と、「availableTags」にあるタグのみを許可する方法-オプション"？

この質問 (またはその最初の部分) は、過去に既に尋ねられ、回答されていますが、以前のバージョンのプラグインについてです。

4

6 に答える 6

14

最初にカスタム オプション (maxTags と onlyAvailableTags) を次のようにプラグイン ファイルに追加します。

options: {
            itemName          : 'item',
            fieldName         : 'tags',
            availableTags     : [],
            tagSource         : null,
            removeConfirmation: false,
            caseSensitive     : true,
            maxTags           : 9999,//maximum tags allowed default almost unlimited
            onlyAvailableTags : false,//boolean, allows tags that are in availableTags or not 
            allowSpaces: false,
            animate: true,
            singleField: false,
            singleFieldDelimiter: ',',
            singleFieldNode: null,
            tabIndex: null,
            onTagAdded  : null,
            onTagRemoved: null,
            onTagClicked: null
        }

次に_isNew関数をこれに置き換えます...

_isNew: function(value) {
            var that = this;
            var isNew = true;
            var count = 0;
            this.tagList.children('.tagit-choice').each(function(i) {
                count++;

                if (that._formatStr(value) == that._formatStr(that.tagLabel(this))|| count >= that.options.maxTags) {
                    isNew = false;
                    return false;
                }
                if (that.options.onlyAvailableTags && $.inArray(that._formatStr(value),that.options.availableTags)==-1) {
                    isNew = false;
                    return false;
                }

            });
            return isNew;
        }

tagit を初期化するときにオプションを使用できるようになりました。最大 3 つのタグを持つ sampleTags のみが許可されます

$(function(){
            var sampleTags = ['php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python'];

            //-------------------------------
            // Tag events
            //-------------------------------
            var eventTags = $('#s_tags');
            eventTags.tagit({
                availableTags: sampleTags,
                caseSensitive: false,
                onlyAvailableTags: true,
                maxTags:3,

            })

        });
于 2011-09-21T13:00:51.907 に答える
7

このパラメーターを .tagit に指定するだけです。

beforeTagAdded: function(event, ui) {
  if($.inArray(ui.tagLabel, availableTags)==-1) return false;
}

availableTags はオートコンプリート配列です。

以下の @snuggles クエリに関しては、おそらく次のようなことができると思います (json プロトコルに関する知識が限られているにもかかわらず)。

//define autocomplete source
var returnedUsers, jsonUrl = "http://[your server]/user_lookup";
$.getJSON(jsonUrl,function(json){
        returnedUsers = json; // or whatever handler you need to use               
}); 

// instantiate tagit

$("#ccList").tagit({
     availableTags: returnedUsers,
     beforeTagAdded: function(event, ui) { 
     // only allow existing values
     if($.inArray(ui.tagLabel, returnedUsers)==-1) return false;
     // limit length
     if ($(".tagit-choice").length >= 5) return false;
});
于 2013-02-25T17:12:19.580 に答える
3

2013 年 3 月 13 日更新:

まず、OP を読み直すと、2 つの調整を行うためにtag-it プラグインを変更する方法を具体的に尋ねられたため、本当に質問に答えているかどうかがわかりません。OP が本当にプラグインを変更したい場合は、それで問題ありませんが、前に述べたように、そうしなければならないのは不自由に思えます。

したがって、プラグインを変更せずに両方を達成する方法は次のとおりです:)

まず、何かを入れるためのある種のグローバル配列が必要です。それを行うためのより良い方法がある場合は、lmk ですが、そうでない場合は次のようになります。

var returnedUsers = [];

それで：

    $("#ccList").tagit({
    autocomplete: {
        source: function( request, response ) {
            $.ajax({
                url: "http://[your server]/user_lookup",
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function( data ) {
                    returnedUsers = data;
                    response( $.map( data, function( item ) {
                        return {
                            label: item,
                            value: item
                        }
                    }));
                },
                error: function(xhr, status, error) {
                    returnedUsers = [];
                }
            });
        }
    },
    beforeTagAdded: function(event, ui) {
        if ($.inArray(ui.tagLabel, returnedUsers)==-1)
            return false;
        if ($(".tagit-choice").length >= 5)
            return false;
    }
});

したがって、基本的には、すべての ajax を処理して独自のリストを作成する関数で autocomplete.source をポイントする必要があります。これを行うと、cgi バックエンドから返すものにある程度の柔軟性が得られることに注意してください (つまり、文字列の配列である必要はなく、解析してカスタム リストに組み込むハッシュの配列でもかまいません) 。また、「beforeTagAdded」イベントのより基本的なオートコンプリート関数から返される値のリストにアクセスする方法を見つけることができれば、これは必要ないことに注意してください。

表示するものの配列を作成したら、response() 関数を使用してそれを返します。同時に、'returnedUsers' にそのリストのコピーがあり、'beforeTagAdded' 関数で使用できます。また、ボックスに許可するタグの数を制限するのは簡単です。すでにそこにあるタグの数を数え、その数以上の場合は false を返します。それがカウントを取得する最良の方法であるかどうかはわかりませんが、間違いなく機能します。

私はこれが古いことを知っており、専門家なら誰でも私よりも優れた方法を見つけることができると確信していますが、この問題を回避する方法を、私が概説したものよりもうまく説明している人を実際に見つけたことはありません。私が好まないプラグインの変更。チッ！

于 2013-03-12T22:36:16.197 に答える
2

jQuery UI Tag-it! @ バージョン v2.0 (2011 年 6 月)。

ファイルtag-it.jsに移動

関数createTagを見つけます

そして、最初に次のコード。

    if (that.options.maxTags) {
      if ($('.tagit li').length > that.options.maxTags) {
        alert('Maxmium ' + that.options.maxTags + ' tags are allowed')
        return false;
       }
    }

そして、そのページで

$("#myTags").tagit({
  maxTags: 8
});

これにより、タグが 8 個に制限されます。数を any に変更して、その数のタグを制限できます。

于 2015-12-14T09:52:13.543 に答える