Question

我在select2上使用格式化程序，所以我可以很好地对齐两个元素（代码/描述），但插件似乎只是在搜索描述而不是查看代码/描述作为整个文本。

可能是因为它只搜索原始<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
});

fiddle here

有人知道解决这个问题吗？

Answer 1

您可以添加此代码 - 或手动将值添加到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/

修改

您可以使用matcher选项并将值添加到文本

$(".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/

Answer 2

如果不编辑select2插件，你可以做一些简单的事情，比如......

将值附加到标记中的描述中（或使用jQuery）。

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

然后将你的“selectBoxOptionFormat”剥离出来

state.text.replace(/\[[^\]]+\]/, "");

Answer 3

似乎可以在Select2中创建自定义匹配。我错过了他们的文档页面上的部分，它提到了基于自定义选项属性进行搜索的可能性。抱歉，那个。

matcher: function(term, text, opt) {
                    return text.toUpperCase().indexOf(term.toUpperCase())>=0
                        || opt.attr("value").toUpperCase().indexOf(term.toUpperCase())>=0;
}

格式化程序附加的jQuery Select2值可以搜索

3 个答案: