参考链接：
参考一：https://blog.csdn.net/weixin_36146275/article/details/79336158
参考二：https://www.cnblogs.com/wangchuanqi/p/5981212.html
参考三：https://www.cnblogs.com/sharpest/p/6117043.html
1、使用插件，首先要引入别人的插件了，你可以选择离线（无网络）或者在线引用的（如果有网络）。
在线引用如下所示：
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> 离线引用如下所示：注意自己的引用路径哦
<link type="text/css" rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
<script type="text/javascript" src="../../plugins/select2/js/select2.js"></script>
2、先将弹出框做出来，你可以模拟数据或者从后台将数据查询出来，进行操作。
<!-- 选择你想要的那条数据哦 -->
<div id="dbName" style="display: none;">
<form class="form-horizontal setWidth" id="dbNameContent" name="dbNameContent">
<div class="form-group" style="width: 90%">
<label for="dbNameCategory" class="col-sm-3 control-label">xxx库<font color='red'>✲</font></label>
<div class="col-sm-9" style="padding: 0px;">
<select class="form-control width175" id="dbNameCategory" name="dbNameCategory">
<option value=''>-- 请选择 --</option>
</select>
</div>
</div>
</form>
</div>
将弹出框先做出来，然后呢。弹出框里面的数据，我是从后台查询出来的，放到select选择框里面的，你可以根据自己的需求来做哦。
3、初始化select2。
<script type="text/javascript">
$(function(){
$.ajax({
type : 'post',
url : "xxxAction!findxxx.action",
dataType : 'json',
error : function(request, textStatus,
errorThrown) {
fxShowAjaxError(request, textStatus,
errorThrown);
},
success : function(data) {
//console.log(data.result);
var result = data.result;
for(var i=;i<result.length;i++){
$("#dbNameCategory").append("<option value='"+ result[i].id +"'>" + result[i].alias + "</opstion>");
}
}
})
//初始化select2，关键点在于，将select下拉框里面的id进行定义然后初始化select2
$("#jobdbNameCategory").select2();
});
</script>
更多其他的功能可以根据自己的需求进行开发河使用。
4、模拟的使用select2插件进行下拉框来进行自动补全。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基本实例</title>
<!--
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
--> <link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jQuery-2.1.3.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/select2.min.css">
<script type="text/javascript" src="js/select2.min.js"></script> <script type="text/javascript">
//页面加载完成后初始化select2控件
$(function () {
$("#area").select2();
}); // select2()函数可添加相应配置：
$('#area').select2({
placeholder: '请选择区域'
}); //选中控件id="area"、value="1"的元素
function findByName(){
//初始化select2
var areaObj = $("#area").select2();
var optionVal = ;
areaObj .val(optionVal).trigger("change");
areaObj .change();
} </script>
</head>
<body> <div align="center" style="padding-top:100px;">
<span>省份或直辖市：</span>
<select id="area" class="select2" style="width:300px;">
<option value="" selected="selected">请选择区域省或直辖市</option>
<option value="">浙江省</option>
<option value="">广东省</option>
<option value="">上海市</option>
<option value="">贵州省</option>
<option value="">江苏省</option>
<option value="">山东省</option>
<option value="">重庆市</option>
<option value="">四川省</option>
<option value="">安徽省</option> <option value="">北京市</option>
<option value="">天津市</option>
<option value="">河北省</option>
<option value="">山西省</option>
<option value="">内蒙省</option>
<option value="">辽宁省</option>
<option value="">吉林省</option>
<option value="">黑龙江省</option>
<option value="">福建省</option>
<option value="">江西省</option>
<option value="">河南省</option>
<option value="">湖北省</option>
<option value="">湖南省</option>
<option value="">广西省</option>
<option value="">海南省</option>
<option value="">云南省</option>
<option value="">*省</option>
<option value="">陕西省</option>
<option value="">甘肃省</option>
<option value="">青海省</option>
<option value="">宁夏省</option>
<option value="">*省</option>
</select>
</div> </body>
</html>
效果如下所示：
待续......