select2 tag之远程源搜索

#CSS

<style>

.select2-results__option[aria-selected=true] {
    display: false;
}
li[aria-selected=true] {
   display: none !important;
}
</style>

#Html

<section id="tags" class="row">

    <div class="col-md-4">
        <p>
            <select id= "userlist" class="js-data-example-ajax form-control" multiple="multiple">
            </select>
        </p>
    </div>

</section>

#JavaScript

<script>
var addUser2List=function(usrlist){ 
  $("#userlist").select2({
    tags: true,
    multiple: true,
    data: usrlist
});
}


addUser2List([{id:"val_kk",text:"txt_kk",selected:true}]) //添加历史选择项


$(function () {
$("#userlist").select2({
ajax: {
url: "/bhuser/getnickName_Email",
dataType: 'json',
delay: 250,
data: function (params) {//ajax url parameters
return {
  nickname: params.term, // set url parameter nickname=params.term
  page: params.page
};
},
processResults: function (data) {
           return {
               results: data.items
           };
     },
cache: true
},
escapeMarkup: function (markup) { 
return markup; 
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelect // omitted for brevity, see the source of this page
});
});


function formatRepo (repo) { //从后台读取到数据项在下拉菜单中的显示名称，直接返回text字段
if (repo.loading) 
return repo.text;
return repo.text;
}


function formatRepoSelect (repo) { //新选择时，会把所有已选的项进行设置。
if (repo.loading) 
return repo.text;
repo.selected = true;   //这里设置为true，可以区分是第一次进入还是后续进入
return repo.text;
}


$("#userlist").on("select2:unselect",function(e){ //去除时回调
var reslist=$("#userlist").val();
console.log("select2:unselect", e.params.data.id);
});
</script>