jquery select2 按第一个字符搜索不区分大小写

Question

我有一个使用 'Select2' 的下拉菜单，如下所示：

  <option value="1">Banana</option>  
    <option value="2">Apple</option>
    <option value="3">Orange 2</option>       
    <option value="4">Mango</option>
    <option value="5">Pomegranate</option>

我的实现如下：

$(document).ready(function() {

      //Search method modification
     // Single select example if using params obj or configuration seen above
      var configParamsObj = {
            placeholder: 'Select an option...', // Place holder text to place in the select
            minimumResultsForSearch: 3, // Overrides default of 15 set above
          matcher: function (params, data) {
      // If there are no search terms, return all of the data
      if ($.trim(params.term) === '') {
        return data;
      }

      // `params.term` should be the term that is used for searching
      // `data.text` is the text that is displayed for the data object
      if (data.text.indexOf(params.term) > -1) {
        var modifiedData = $.extend({}, data, true);
        modifiedData.text += ' (matched)';

        // You can return modified objects from here
        // This includes matching the `children` how you want in nested data sets
        return modifiedData;
      }


      // Return `null` if the term should not be displayed
      return null;
    }
        };


    //Search method modification                            
            //Changepicker disable                  
            $(".selectspy").select2(configParamsObj);
});

但是当我搜索字母 a 时，我需要以 a 开头的输出，即 Apple。但是我得到了 Banana。

我在按 'a'-> 搜索时期待苹果、香蕉、芒果

我需要按首字母搜索不区分大小写。

Fiddle

版本：Select2 4.0.0

Answer 1

这是一种对返回结果进行排序的方法：https://jsfiddle.net/jEADR/2317/

另外，更新到上个版本3.5.4。此函数在版本 4 中已重命名为 sorter。

$('#e1').select2({
    width: '200px',
    sortResults: function (results, container, query) {
        if (query.term) {
            // use the built in javascript sort function
            return results.sort(function (a, b) {
                if (a.text.length > b.text.length) {
                    return 1;
                } else if (a.text.length < b.text.length) {
                    return -1;
                } else {
                    return 0;
                }
            });
        }
        return results;
    }
});

更新

function permute(input, permArr, usedChars) {
  var i, ch;
  for (i = 0; i < input.length; i++) {
    ch = input.splice(i, 1)[0];
    usedChars.push(ch);
    if (input.length === 0) {
      permArr.push(usedChars.slice());
    }
    permute(input, permArr, usedChars);
    input.splice(i, 0, ch);
    usedChars.pop();
  }
  return permArr;
}


$("#singleSelectExample").select2({
  matcher: function(term, text) {

    if (term.length === 0) return true;
    texts = text.split(" ");

    allCombinations = permute(texts, [], []);

    for (i in allCombinations) {
      if (allCombinations[i].join(" ").toUpperCase().indexOf(term.toUpperCase()) === 0) {
        return true;
      }
    }
    return false;
  }
});

.selectRow {
  display: block;
  padding: 20px;
}
.select2-container {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />


<body>Single select example
  <div class="selectRow">
    <select id="singleSelectExample">
      <option></option>
      <option value="1">Apple 1</option>
      <option value="2">Orange 2</option>
      <option value="3">Banana</option>
      <option value="4">Mango</option>
      <option value="5">Pomegranate</option>
      <option value="6">Apple 2</option>
    </select>
  </div>
</body>

jquery select2 按第一个字符搜索不区分大小写

jquery select2 case insenstive search by first character

jquery

search

jquery-select2