自定义选择的 jquery答案

【问题标题】：customizing chosen jquery自定义选择的 jquery
【发布时间】：2014-12-06 12:02:33
【问题描述】：

我已经使用 jquery selected 插件实现了多项选择。它工作正常。

现在考虑选择框包含以下值：

一个
一二
一三
两个
二三

如果我输入'two'，结果如下所示，

一二
两个
二三

但我需要对其进行自定义，以便首先显示包含开头字符的匹配结果：

两个
二三
一二

下面的示例 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>

【问题讨论】：

标签： javascript jquery jquery-chosen

【解决方案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>

【讨论】：