Question

我使用jquery选择的插件实现了一个多选。它的工作正常。

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

一个
一二
一三
2
二三

如果我输入“＆＃39; two＆＃39;”，结果将显示如下，

一二
2
二三

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

2
二三
一二

以下示例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>

自定义选择的jquery

1 个答案: