自定義選擇的jquery

Question

我已經實現了使用jquery選擇插件的多重選擇。它的工作很好。

現在考慮選擇框中包含以下值：

• 一個
• 一二
• 三種
• 二三

如果鍵入「兩個'，結果顯示如下，

• 一二
• 二三

但我需要自定義它，包含字符開頭的匹配結果應該先顯示：

• 兩個三個
• 一二

樣本HTML以下：

<select class="chosen" data-order="true" name="multiselect[]" id="multiselect" multiple="true"> 
    <option value="1">one</option> 
    <option value="12">one two</option> 
    <option value="13">one three</option> 
    <option value="2">two</option> 
    <option value="23">two three</option> 
</select> 

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="chosen.jquery.min.js"></script> 
<script type="text/javascript"> 
    $(".chosen").chosen({ 
    disable_search_threshold: 10, 
    no_results_text: "No Results Found!", 
    width: "50%" 
    }); 
</script> 

Answer 1

大量的試驗和錯誤後，我想出了這個主意。它按照要求工作。試試吧

$(function() { 
 

 
    // run chosen plugin 
 
    $("#my-dropdown").chosen({ 
 
    disable_search_threshold: 10, 
 
    no_results_text: "No Results Found!", 
 
    width: "50%" 
 
    }); 
 

 
    $(".default").keyup(function() { 
 

 
    $(".chosen-results li").sort(sort_bey).appendTo('.chosen-results'); 
 

 
    function sort_bey(a, b) { 
 

 
     var str = $(a).text(); 
 

 
     var str2 = $(b).text(); 
 

 
     var v = $('.default').val(); 
 

 
     var p1 = str.indexOf(v.charAt(0)); 
 

 
     var p2 = str2.indexOf(v.charAt(0)); 
 

 
     return (p1 > p2) ? 1 : -1; 
 
    } 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script> 
 

 
<select class="chosen" data-order="true" name="multiselect[]" id="my-dropdown" multiple="true"> 
 
    <option value="1">one</option> 
 
    <option value="12">one two</option> 
 
    <option value="13">one three</option> 
 
    <option value="2">two</option> 
 
    <option value="23">two three</option> 
 
</select>