select 2插件的使用和遇到的坑

使用方法

首先引入

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

然后在js中声明

//打开model后触发
$("#modalWithScroll2").on("shown.bs.modal",function () {
        var selectorx = $('#pid').select2({
            placeholder: '请选择',
            ajax: {
              url: "/index/admin/getmagazine",
              dataType: 'json',
              delay: 250,
              data: function (params) {
                return {
                  search: params.term,
                };
              },
              processResults: function (data) {
                return {
                  results: data.data
                };
              },
              cache: true
            },
            minimumInputLength: 0,
            width:'100%'
          });

      });

遇到的坑
1、宽度问题 select框太窄
解决办法：在js定义select时加入width:‘100%’
2、搜索输入框不能点击问题
解决办法：去掉model那个div里的tabindex=”-1”属性

在model没打开时就声明select输入框也不能点击，要在model打开时再声明

//model打开时执行
$("#modalWithScroll2").on("shown.bs.modal",function () {
	//声明select
	...
})

3、搜索无效
解决办法：查了资料发现在输入框输入值时会自动将值传到后台接口，后台接收input(‘search’)，用like语句处理后返回即可