javascript - customizing chosen jquery -
i have implemented multiple select using jquery chosen plugin. works fine.
now consider select box contains following values:
- one
- one two
- one three
- two
- two three
if type 'two', result displayed below,
- one two
- two
- two three
but need customize matching results containing characters @ beginning should show first:
- two
- two three
- one two
sample html below:
<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>
after lot of trials , errors, came idea . working per requirement . try it
$(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>
Comments
Post a Comment