select2.js下拉查询插件 自定义下拉模板 亲测可用，select2是一个非常强大的下拉搜索插件，在切图网的前端外包项目中有很高的使用比例，因为它的参数足够多，回调函数，扩展函数足够全面，所以可以实现很多不同的效果，满足前端切图项目中遇到的各种情况，下面是在切图网项目中遇到的，采用select2实现 自定义下拉模板，附代码 亲测可用。

var sdata = [
{id: '+86', text:'+86',text2:'中国大陆',text3:'zhongguodalu'},
{id: '+81', text:'+81',text2:'日本',text3:'riben'},
{id: '+82', text:'+82',text2:'韩国',text3:'hanguo'},
{id: '+65', text:'+65',text2:'新加坡',text3:'xinjiapo'}
]


function formatState (state) {
if (!state.id) {
return state.text;
}
// var baseUrl = "/user/pages/images/flags";
// var $state = $(
// '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
// );

var $state = $(
'<span><em style="float:right;">'+state.text+'</em><font>' + state.text2 + '</font></span>'
);

return $state;
};

//搜索匹配，改了下拉模板以后，text2字段无法被索引
function matchCustom(params, data) {


// If there are no search terms, return all of the data
if ($.trim(params.term) === '') {
return data;
}

// Do not display the item if there is no 'text' property
if (typeof data.text2 === 'undefined') {
return null;
}

// `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.text2.indexOf(params.term) > -1) {

//2024.7.31支持拼音检索
if (data.text2.toLowerCase().indexOf(params.term) > -1 || data.text3.toLowerCase().indexOf(params.term) > -1) {
var modifiedData = $.extend({}, data, true);
modifiedData.text2 += ' (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;
}

$('.js-example-basic-single1').select2({
data: sdata,
minimumResultsForSearch: 0, //显示输入框
placeholder: "请选择",
//allowClear: true,
dropdownCssClass:'aaa',
//selectionCssClass:'bbb',
language: {
noResults: function(params) {
return '没有数据';
}

},
templateResult: formatState,
matcher: matchCustom
});

切图网是国内最早提供前端开发外包的公司之一，提供专业的前端开发外包服务，欢迎垂询。

标签：select2, select2.js