4

select2でフォーマッタを使用しているので、2 つの要素 ( code / description ) を適切に配置できますが、プラグインは説明のみを検索しているようで、コード / 説明をテキスト全体として見ていません。

<option/>おそらく、後で追加されるものではなく、元の内部の内容のみを検索するためです。

HTML

<select class="foo">
    <option value="codex">description 1</option>
    <option value="codey">description 2</option>
    <option value="cod">description 3</option>
    <option value="code">description 4</option>
</select>​

JS

function selectBoxOptionFormat(state) {
    var originalOption = state.element;

    return "<span class='selectBoxOptionCode'>" + state.id + "</span><span>" + state.text + "</span>";    
}

$(".foo").select2({
    width:"350px",
    formatResult: selectBoxOptionFormat
}); ​

ここでフィドル

誰でもこれを回避する方法を知っていますか?

4

3 に答える 3

2

このコードを追加するか、HTML のテキストに値を手動で追加できます。

$('.foo option').text(function(i,v){
    return this.value + ' ' + v;
});

次に、フォーマット関数で値を削除します

function selectBoxOptionFormat(state) {
    var originalOption = state.element;
    var txt = state.text.split(' ').slice(1).join(' ');
    return "<span class='selectBoxOptionCode'>" + state.id + "</span><span>" + txt  + "</span>";    
}

http://jsfiddle.net/wirey00/2ZLWU/

編集：

マッチャーオプションを使用して、値をテキストに追加できます

$(".foo").select2({
    width:"350px",
    formatResult: selectBoxOptionFormat,
    matcher: function(term, text,v) { 
        var txt = $(v).val() + ' ' + text;       
        return txt.toUpperCase().indexOf(term.toUpperCase())==0; }
}); ​

http://jsfiddle.net/wirey00/HudyG/

于 2012-12-27T20:57:48.937 に答える
1

select2プラグインを編集しなくても、次のような簡単なことを行うことができます...

マークアップの説明に値を追加します (または jQuery を使用します)。

<option value="codex">description 1 [codex]</option>

次に、「selectBoxOptionFormat」にそれを取り除いてもらいます

state.text.replace(/\[[^\]]+\]/, "");
于 2012-12-27T20:56:47.720 に答える
1

Select2 でカスタム マッチを作成できるようです。カスタムオプション属性に基づいて検索する可能性について言及しているドキュメントページのセクションを見逃しました. 申し訳ありません。

matcher: function(term, text, opt) {
                    return text.toUpperCase().indexOf(term.toUpperCase())>=0
                        || opt.attr("value").toUpperCase().indexOf(term.toUpperCase())>=0;
}
于 2012-12-27T21:15:42.833 に答える