select2下拉选择框ajax搜索加载数据

原创 2019-08-13 14:52 阅读(1301)次

前端表单需要使用ajax查询数据并选择的场景很多,今天就想起使用select2处理这样的问题,记录一下代码,省的每次都去网上找。


上代码:

引入select2

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
dom

<select class="js-example-data-ajax form-control" style="width: 100%" id="changeDeptId">
</select>
js

$('#changeDeptId').select2({
	  ajax: {
	    url: function (params) {
	        return personnel_service_ip+'/departments';
	    },
	    data: function (params) {
          return {
          	params:{
          		deptName: params.term, // search term 请求参数 , 请求框中输入的参数
          		deptType: 7
          	},
          	offset: 0,
          	limit:100
          };

      },
	    processResults: function (data) {

          var itemList = [];
          var arr = data.data;
          for(item in arr){
              itemList.push({id: arr[item].id, text: arr[item].deptName})
          }

          return {
              results: itemList
          };
	    }
	    
	},
  placeholder:'----请选择-----',//默认文字提示
  language: "zh-CN"
});

备注:

如果在bootstrap的模态框中使用,可能会有输入查询框中不能输入的问题,需要在加载bootstrap modal模态框之前加入如下代码:

$.fn.modal.Constructor.prototype.enforceFocus = function () { }





下一篇:java四元运算