下拉框、下拉控件之Select2。自动补全的使用
参考链接：
参考一：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>
效果如下所示：
待续......
下拉框、下拉控件之Select2。自动补全的使用的更多相关文章
- Asp.net绑定带层次下拉框（select控件）
1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server" style="width:16 ...
- Jquery+json绑定带层次下拉框（select控件）
一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...
- [Android] AutoCompleteTextView：自己主动完毕输入内容的控件（自己主动补全）
AutoCompleteTextView是EditText的直接子类,与普通EditText的最大不同就是.在用户输入的过程中,能够列出可供选择的输入项.方便使用者. AutoCompleteText ...
- jquery input 下拉框(模拟select控件)焦点事件
本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...
- 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+
Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...
- android 支持上拉加载，下拉刷新的列表控件SwipeRefreshLayout的二次封装
上拉加载,下拉刷新的列表控件,大家一定都封装过,或者使用过 源代码,我会在最后贴出来 这篇代码主要是为了解决两个问题 1.滑动冲突得问题 2.listview无数据时,无数据布局的展示问题 下方列出的 ...
- UI中经常出现的下拉框下拉自动筛选效果的实现
小需求是当你在第一个下拉框选择了国家时,会自动更新第二个省份的下拉框,效果如下 两个下拉选择Html如下: <select id="country_select"> & ...
- 在Windows7/8/10 64位操作系统下安装并注册ocx控件
例如: 先网上下载一个MtbLine.ocx控件放入C:\Windows\SysWOW64\目录下 1.首先确保你的 Windows7 账户是管理员权限 2.下载MtbLine.ocx控件,网上可搜到 ...
- 【SoDiaoEditor电子病历编辑器】阶段性更新--新增复选框、日期控件、表格排版支持等
转眼距离上一次v2正式发布已经过去一个半月了.github期间不定期push了二十几次,同时感谢分布在广州.福建.上海.北京的一众小伙伴,正是你们给出的建议,才让SoDiaoEditor不断完善. 我 ...
随机推荐
- python学习日记（面向对象——组合）
组合指的是,在一个类中以另外一个类的对象作为数据属性,称为类的组合 圆环是由两个圆组成的,圆环的面积是外面圆的面积减去内部圆的面积.圆环的周长是内部圆的周长加上外部圆的周长.这个时候,我们就首先实现一 ...
- python学习日记（包——package）
简述——包 包是一种通过使用‘.模块名’来组织python模块名称空间的方式. 注意: 1. 无论是import形式还是from...import形式,凡是在导入语句中(而不是在使用时)遇到带点的,都 ...
- "大概能给你的磕盐增加一点幸福感✈"-[那些年的矫情]
#--------------------------------------------------------------------------------------------------- ...
- ref、out参数
ref和out都是表示按引用传递.与指针类似,直接指向同一内存. 按值传递参数的方法永远不可能改变方法外的变量,需要改变方法外的变量就必须按引用传递参数. 传递参数的方法,在C语言里,用指针.在C#里 ...
- .Net Core在Centos7上初体验
本文主要内容是简单介绍如何在centos7上开发.Net Core项目,在此之前我们首先了解下.Net Core的基本特性. 1 .Net Core和.Net FrameWork的异同 1.1 .Ne ...
- 如何设置Maven代理
1.公司的网络走的是代理,那么如何设置maven下载jar包时也走代理呢. 根据百度出来的两篇文章 设置了一下,但是还是报错. Plugin org.apache.maven.plugins:mave ...
- QPS从0到4000请求每秒，谈达达后台架构演化之路
达达是全国领先的最后三公里物流配送平台. 达达的业务模式与滴滴以及Uber很相似,以众包的方式利用社会闲散人力资源,解决O2O最后三公里即时性配送难题(目前达达已经与京东到家合并). 达达业务主要包含 ...
- 光刻技术的原理和EUV光刻技术前景
本文转载自微信公众号 半导体技术天地, 链接 https://mp.weixin.qq.com/s/EEBkSQ_Yc8RYFO18VpO8ow
- 第31月第10天 tableview头部空白 Other Linker Flags rtmp
1.ios10 tableview头部空白 if (@available(iOS 11.0, *)) { self.tableView.contentInsetAdjustmentBehavior = ...
- docker搭建及使用：centos7.0+docker+flask+nginx
flask笔记: centos7安装Docker: yum install docker 启动docker服务: service docker start 构建基本镜像: sudo docker pu ...