Java之路--select2下拉框插件的学习笔记

今日在工作中需要实现下拉框模糊查询，网上搜了资料发现select2插件比较强大，于是乎开始了简单的使用，首先要下载select2的源码包，可以直接从官网下载，如果你很懒，手动取，我下的最新版本4.0.6，链接：https://pan.baidu.com/s/17a8WixayAF7RSqTWURLLgA 密码：imnn 。

官网有demo演示，如果你像我一样看不太懂英文，可以使用网页翻译工具翻译后查阅。下面进入教程以本人所用的代码做示例

1.页面引入select2.js和select2.css

<!-- select2下拉框插件 -->
<link rel="stylesheet" type="text/css" href="plugins/select2/dist/css/select2.css">
<script type="text/javascript" src="plugins/select2/dist/js/select2.js"></script>

2.select2初始化（函数 select2（））

在javaScript中初始化select2，选中你的select标签，如id

    $("#a_proName").select2();//selet2初始化

这样就实现了基本的select的模糊查询，样式也比较简洁，效果如下图

贴出代码：

<label class="col-sm-2 control-label">供应商</label>
<div class="col-sm-10" style="width: 300px;">
    <select class="form-control select-opt" id="a_company">
	    <option value="0">请选择...</option>
	<c:forEach items="${companys }" var="com">
	    <option value="${com.comName }">${com.comName}</option>
	</c:forEach>
    </select>
</div>

3.事实上并没这么顺利，因为项目中使用了modal窗口。对应的div有这么一个属性 tabindex="-1"，我还不清楚这个起到什么样的作用，但是这个东西确实影响了select2，导致下拉框中的模糊查询的输入框无法输入内容，网上查阅了资料，解决办法有两种：

1：在你的初始化select2的代码段外加上一段代码：

$.fn.modal.Constructor.prototype.enforceFocus = function () {//由于是在模态窗口中使用select2，所有加上此句  解决输入框无法输入的问题
	//$("#a_proName").select2();//selet2初始化
};

2：把modal窗口对应的tabindex=”-1“去掉，一样可以解决此问题，由于考虑到此种方法可能会导致其他问题，本人推荐使用方法1

小结：这是select2最最简单的使用，而select2有着更强大的功能，可以异步加载数据库的数据，这样就减少了服务器的载荷，程序就更加高效，并且可以实现多选并显示在输入框等等，select2本人觉的是个不错的选择。

Java之路--select2下拉框插件的学习笔记

猜你喜欢