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

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -