8

select2を使用しています。

新しいタグが存在しない場合に追加できるように設定しましたが、

また、twitterブートストラップを使用しています。タグが存在しない場合は、新しいタグとしてマークを付けたいので、'<span class="label label-important">New</span> 'これをselect2初期化子としてテキストの前に追加します。

$('#newVideoCategory').select2({
        placeholder: 'Select a category...',
        data: categories,
        createSearchChoice: function (term, data) {
            if ($(data).filter(function () {
                return this.text.localeCompare(term) === 0;
            }).length === 0) {
                return {id: term, text: '<span class="label label-important">New</span> ' + term};
            }
        },
        initSelection: function (element, callback) {
            $(categories).each(function () {
                if (this.id == element.val()) {
                    callback(this);
                    return;
                }
            })
        }
    })

今これはうまくいきます

新しいタグとしてマーク

タグに入力したものがそのラベルのマークアップの一部として存在しない限り 新しいタグとしてマークされたエラー

私が集めたものから、、、、またはのいずれかを上書きする必要がformatResultありformatSelectionますmatcher。

それは私がドキュメントから得たものですが、私はそれをどのように変更する必要があるのか​​理解していません。

4

3 に答える 3

7

質問を投稿（および回答）していただきありがとうございます。私はこれを解決するためのより簡単な方法を見つけたと思います：

...
createSearchChoice:function(term, data) {
    if ($(data).filter(function() {
        return this.text.localeCompare(term) === 0;
    }).length === 0) {
        return {id:term, text: term, isNew: true};
    }
},
formatResult: function(term) {
    if (term.isNew) {
        return '<span class="label label-important">New</span> ' + term.text;
    }
    else {
        return term.text;
    }
},
...

関数から任意のオブジェクトを返すことができるので、それが新しいアイテムであることcreateSearchChoice()を示すフィールドを追加するだけです。formatResult()

このように、返されたアイテムのテキストは必要なテキストでformatResult()あり、はるかに単純です。

于 2013-05-08T18:37:15.253 に答える
1

formatResultああ、関数を上書きして取得しました。

基本的に、最初の文字が私たちのものであるかどうかを確認しnewTagMark、それを取り除き、一致するロジックを適用してから、もう一度先頭に追加して吐き出します。

markMatchロジックの大部分は、実際にはselect2の内部関数のコピーアンドペーストにすぎません。

var newTagMark = '<span class="label label-important">New</span> ';

$('#newVideoCategory').select2({
    placeholder: 'Select a category...',
    data: categories,
    createSearchChoice: function (term, data) {
        if ($(data).filter(function () {
            return this.text.localeCompare(term) === 0;
        }).length === 0) {
            return {id: term, text: newTagMark + term};
        }
    },
    initSelection: function (element, callback) {
        $(categories).each(function () {
            if (this.id == element.val()) {
                callback(this);
                return;
            }
        })
    },
    formatResult: function(result, container, query) {
        var text = result.text;
        var term = query.term;
        var markup=[];
        var marked = false;
        if(text.substr(0, newTagMark.length) == newTagMark){
            text = text.substr(newTagMark.length);
            markup.push(newTagMark);
        }

        var match=text.toUpperCase().indexOf(term.toUpperCase()),
                tl=term.length;
        if (match<0) {
            markup.push(text);
            return;
        }

        markup.push(text.substring(0, match));
        markup.push("<span class='select2-match'>");
        markup.push(text.substring(match, match + tl));
        markup.push("</span>");
        markup.push(text.substring(match + tl, text.length));
        return markup.join("");
    }
});
于 2013-02-04T05:09:53.503 に答える
0

一致のマーキングを含む解決策は次のとおりです。

...
createSearchChoice:function(term, data) {
    if ($(data).filter(function() {
        return this.text.localeCompare(term) === 0;
    }).length === 0) {
        return {id:term, text: term, isNew: true};
    }
},
formatResult: function (result, container, query, escapeMarkup) {
    var markup=[];
    window.Select2.util.markMatch(this.text(result), query.term, markup, escapeMarkup);
    var text = markup.join("");
    if (result.isNew) {
        text = '<span class="label label-important">NEW</span> ' + text;
    }
    return text;
},
...
于 2018-07-20T13:01:31.730 に答える