下拉框、下拉控件之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不断完善. 我 ...

随机推荐

Re.常系数齐次递推
前言嗯我之前的不知道多少天看这个的时候到底在干什么呢为什么那么.. 可能大佬们太强的缘故最后仔细想想思路那么的emmm 不说了要落泪了唔唔唔前置多项式求逆多项式除法/取模常 ...
牛客小白月赛13-J小A的数学题（莫比乌斯反演）
链接:https://ac.nowcoder.com/acm/contest/549/J来源:牛客网题目描述小A最近开始研究数论题了,这一次他随手写出来一个式子,∑ni=1∑mj=1gcd(i,j ...
【洛谷P1963】变换序列
题目大意:对于一个顺序序列,求一个合法置换,可以满足一些约束,若存在多个合法置换,则输出字典序最小的一个置换. 题解:对于序列的置换是否有解的问题,可以和二分图的完美匹配相关联.由于是字典序最小,显然 ...
初探VUX(基本官网上无特别无干货)
vux@2.x 推荐webpack+vue-loader方式的开发. 第一步安装cli依赖 npm install vue-cli -g 接下来创建项目注意名称是小写 cd projectPath y ...
c/c++程序连接mysql
1.libmysql.dll添加到System32文件夹 “regsvr32 libmysql.dll”注册 2.项目-->属性-->c/c++-->常规-->附加包含目录-- ...
Istio
什么是Istio Istio是Service Mesh(服务网格)的主流实现方案.该方案降低了与微服务架构相关的复杂性,并提供了负载均衡.服务发现.流量管理.断路器.监控.故障注入和智能路由等功能特性 ...
洛伦兹曲线（Lorenz curve）提升指数、提升表和提升图
sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...
freetype 字形解析
目录 freetype 字形解析字体管理数据结构字体抽象 title: freetype 字形解析 date: 2019/3/7 20:17:46 toc: true --- freetype ...
NCE损失(Noise-Constrastive Estimation Loss)
1.算法概述假设X是从真实的数据(或语料库)中抽取的样本,其服从一个相对可参考的概率密度函数P(d),噪音样本Y服从概率密度函数为P(n),噪音对比估计(NCE)就是通过学习一个分类器把这两类样本区 ...
Form 表单相关小技巧
JS ---textarea 高度自适应 var realH = this.scrollHeight + 10+ "px"; $(this).css("height&qu ...

下拉框、下拉控件之Select2。自动补全的使用

下拉框、下拉控件之Select2。自动补全的使用的更多相关文章

随机推荐

热门专题