通過格式化附加的jQuery選擇二值進行搜索

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

看起來似乎可以創建自定義的選擇二相匹配。我錯過了他們的文檔頁面上提到基於自定義選項屬性進行搜索的可能性。對不起這個。

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

Answer 2

，而無需編輯選擇2插件，你可以做一些簡單的像......

在您的標記追加值描述（或使用jQuery）。

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

然後讓你的「selectBoxOptionFormat」它帶出

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

Answer 3

您可以添加此代碼 - 值，或手動在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/