Select2自定义功能

自定义搜索指定值的功能

$(".js-example-templating").select2({
  matcher: function(params, data){
    if ($.trim(params.term) === "") {
      return data;
    }
    if (typeof data.text === 'undefined'){
      return null;
    }
    if (typeof data.id === 'undefined') {
      return null;
    }
    if (data.id.toLowerCase().indexOf(params.term.toLowerCase()) > -1) {
      var modifiedData = $.extend({}, data, true);
      return modifiedData;
    }
    if (data.text.toLowerCase().indexOf(params.term.toLowerCase()) > -1) {
      var modifiedData = $.extend({}, data, true);
      return modifiedData;
    }
    return null
  }
});

自定义显示内容格式

function formatState (state) {
        var name = '',
            enname = '',
            value = '';

        if (!state.id) {
          return state.text;
        }
        if(state.element){
            imgName = state.element.getAttribute('data-name');
            value = state.element.value.toLowerCase();
        }
        var baseUrl = "dist/images/" + imgName;
        var $state = $(
          '<div class="iconSelect clearfix"><span class="imgName"><img src="'+ baseUrl +'.png"/></span><span class="iconValue">'+ value +'</span></div>'
        );
        return $state;


    };
$(".js-example-templating").select2({
  templateResult: formatState,
  templateSelection: function (data) {
    if (data.id === '') { // adjust for custom placeholder values
      return 'Custom styled placeholder text';
    }
    // return data.text;
    return data.id;
  },
});