select2插件使用，当输入的值没有匹配到从后台取的数据时，将当前输入的值加载到select2下拉框

最新推荐文章于 2023-06-08 10:56:51 发布
最新推荐文章于 2023-06-08 10:56:51 发布
阅读量4k 收藏 2
点赞数
分类专栏： select2插件使用，当输入的值没有匹配到从后台取的数据时，将当前输 文章标签： select2插件使用，当输入的值没有匹配到从后台取的数据时，将当前输
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26641273/article/details/82837299
版权

select2插件使用，当输入的值没有匹配到从后台取的数据时，将当前输入的值加载到select2下拉框

在使用select2插件时，我们经常用到输入的值没有匹配到，想要把当前输入的值放到下拉框，这里我举例两种不同的写法，基于angularJS和javaScript.

  1. html和jsp
// html页面代码
           <div class="col-md-4">
                   <div class="form-group">
                       <label class="col-md-5 control-label">单位名称:<span class="required" style="color:red">*</span></label>
                       <div class="col-md-7">
                           <input type="hidden" id="visitUnit" ng-model="tbTcTouristComplaints.visitUnit"
                                  class="form-control select2" style="height: 29px !important;padding: 1px 10px 3px 10px !important;">
                       </div>
                   </div>
               </div>

对比jsp代码：

// jsp页面代码
           <div class="col-md-4">
       <div class="col-md-4">
   						<div class="form-group">
   							<label class="col-md-5 control-label">单位名称:<span class="required" style="color:red">*</span></label>
   							<div class="col-md-7">
   								 <input type="hidden" id="visitUnit" name="receptionApply.visitUnit" class="form-control input-sm select2"> 
   							</div>
   						</div>
   					</div>
  1. angularJS和javaScript脚本初始化
    对于html/angularJS框架，写法如下：
$scope._initSelect2 = function(formId,scope) {
               var obj = $("#visitUnit").select2({
                   placeholder: "请输入单位名称",
                   allowClear: true,
                   minimumInputLength: 1,
                   formatNoMatches: function () { return "没有找到匹配项"; },
                   formatInputTooShort: function (input, min) { var n = min - input.length; return "请再输入" + n + "个字符";},
                   formatInputTooLong: function (input, max) { var n = input.length - max; return "请删掉" + n + "个字符";},
                   formatSelectionTooBig: function (limit) { return "你只能选择最多" + limit + "项"; },
                   formatLoadMore: function (pageNumber) { return "加载结果中…"; },
                   formatSearching: function () { return "搜索中…"; },
                   query: function (query) {
                       if(query.term==null ||query.term.trim()=='')
                           return;
 		 //如下这段代码是angularJS从后台调用方法获取数据，({name:query.term}是传入的输入的值。类似于ajax请求。
    complaintMangeService.tbComplaintsTest({name:query.term}).then(function(data){
                       console.log(data);//从后台得到匹配到的值
                           var datas = {
                               results: []
                           }, i, j, s;
                           if (data.length > 0) {//先将当前输入的值封装到datas.results
                               if(query.term != data[0].NAME){
                                   datas.results.push({
                                       id: query.term,
                                       text: query.term
                                   });
                               }

                               for (i = 0; i < data.length; i++) {//然后将后台得到匹配到的值封装datas.results
                                   s = "";
                                   datas.results.push({
                                       id: data[i].NAME,
                                       text: data[i].NAME
                                   });
                               }
                               query.callback(datas);
                           }else{//如果后台没有匹配到的值，则将当前输入的值封装到datas.results
                               datas.results.push({
                                   id: query.term,
                                   text: query.term
                               });
                               query.callback(datas);//回调query函数
                           }
                       },function(data){
                           console.log("(系统参数查询)其他企业wid查询数据请求失败！")
                       });

                   }
               });
               //obj.on("change",function()方法是当选中值以后需要做什么操作可在这里面写，
               /* obj.on("change",function(){
                          var sUnitName = $('#visitUnit').val();
                           if(sUnitName==null ||sUnitName.trim()==''){
                               if(document.getElementById('visitUnitType').disabled){
                                   $('#visitUnitContact').val('');
                                   $('#contactTele').val('');
                                   $('#visitUnitType').val('');
                                   $('#visitUnitLevel').val('');
                                   $('#visitUnitType').removeAttr("disabled");
                                   $('#visitUnitLevel').removeAttr("disabled");
                                   return;
                               }else{
                                   $('#visitUnitType').removeAttr("disabled");
                                   $('#visitUnitLevel').removeAttr("disabled");
                                   return;
                               }
                           };
                           $.ajax({
                               "dataType": 'json',
                               "type": "POST",
                               "data":{"params.visitUnit":sUnitName},
                               "url": scope._serverUrl+"reception/common_queryApplyByVisitUnit",
                               "success":function (result) {
                                   if(result.params.returnApply !=null ){
                                       $('#visitUnitContact').val(result.params.returnApply.visitUnitContact);
                                       $('#contactTele').val(result.params.returnApply.contactTele);
                                       $('#visitUnitType').val(result.params.returnApply.visitUnitType);
                                       $('#visitUnitLevel').val(result.params.returnApply.visitUnitLevel);
                                       $('#visitUnitType').attr("disabled","disabled");
                                       $('#visitUnitLevel').attr("disabled","disabled");
                                       if(result.params.returnApply.majorGuest!=null){
                                           $('#majorGuest').importTags(result.params.returnApply.majorGuest);
                                           $('#'+formId).validate().element( "#majorGuest" );

                                       }
                                       if(result.params.returnApply.higherAccompanyLeader != null){
                                           $('#higherAccompanyLeader').importTags(result.params.returnApply.higherAccompanyLeader);
                                           $('#'+formId).validate().element( "#higherAccompanyLeader" );

                                       }
                                       $('#'+formId).validate().element( "#visitUnitType" );
                                       $('#'+formId).validate().element( "#visitUnitLevel" );
                                       $('#'+formId).validate().element( "#visitUnitContact" );
                                       $('#'+formId).validate().element( "#contactTele" );

                                   }else{
                                       $('#visitUnitType').removeAttr("disabled");
                                       $('#visitUnitLevel').removeAttr("disabled");

                                   }
                               }, error: function(XMLHttpRequest, textStatus, errorThrown){
                                   bootbox.alert("连接到服务器出现错误，请稍后再试。");
                               }
                           });*/
                       }
               );
           };
           //初始化控件，一定要初始化才能用，对于angularJS，("modofficialOrderForm","")这两个参数可不传，因为完全没啥用，可以直接写成$scope._initSelect2();
           $scope._initSelect2("modofficialOrderForm","");

对于jsp/javascript框架，写法如下（写法和angularJS相同，只是初始化不同和获取后台的数据是采用ajax请求）：

this._initSelect2 = function(formId,scope) {
   	if($("#visitUnitType").val() != ""){
   		$('#visitUnitType').attr("disabled","disabled");
   	}
   	if($("#visitUnitLevel").val() != ""){
      		 $('#visitUnitLevel').attr("disabled","disabled");
   	}
   	var obj = $("#visitUnit").select2({
           placeholder: "请输入单位名称",
           allowClear: true,
           minimumInputLength: 1, 
           formatNoMatches: function () { return "没有找到匹配项"; },
           formatInputTooShort: function (input, min) { var n = min - input.length; return "请再输入" + n + "个字符";},
           formatInputTooLong: function (input, max) { var n = input.length - max; return "请删掉" + n + "个字符";},
           formatSelectionTooBig: function (limit) { return "你只能选择最多" + limit + "项"; },
           formatLoadMore: function (pageNumber) { return "加载结果中…"; },
           formatSearching: function () { return "搜索中…"; },
           query: function (query) {
           	if(query.term==null ||query.term.trim()=='')
           		return;
               $.ajax({
               	"dataType": 'json',
                   "type": "POST",
                   "data": "&params.paramer=" + query.term + "&params.type=" + $('#visitUnitType').val(),
                   "url": scope._serverUrl+"reception/common_queryVisitTypeName",
                   "success":function (result) {
                   	
                   	var datas = {
   	                        results: []
   	                    }, i, j, s;
                   	if (result.params.visitTypeName.length > 0) {
                   		if(query.term != result.params.visitTypeName[0].MANAGE_VISIT_UNIT){
                   			datas.results.push({
   	                            id: query.term,
   	                            text: query.term
   	                        });
                   		}
   	            		 
   	                    for (i = 0; i < result.params.visitTypeName.length; i++) {
   	                        s = "";
   	                        datas.results.push({
   	                            id: result.params.visitTypeName[i].MANAGE_VISIT_UNIT,
   	                            text: result.params.visitTypeName[i].MANAGE_VISIT_UNIT
   	                        });
   	                    }
                   		query.callback(datas);
       				}else{
       					datas.results.push({
                               id: query.term,
                               text: query.term
                           });
       					query.callback(datas);
       				}
                   }, error: function(XMLHttpRequest, textStatus, errorThrown){  
                   	bootbox.alert("连接到服务器出现错误，请稍后再试。");
                   }
               });
           }
       });
   /*	obj.on("change",function(){
       	var sUnitName = $('#visitUnit').val();
       	if(sUnitName==null ||sUnitName.trim()==''){
   			if(document.getElementById('visitUnitType').disabled){
   				$('#visitUnitContact').val('');
   				$('#contactTele').val('');
   				$('#visitUnitType').val('');
   				$('#visitUnitLevel').val('');
   				$('#visitUnitType').removeAttr("disabled");
   				$('#visitUnitLevel').removeAttr("disabled");
   				return;
   			}else{
   				 $('#visitUnitType').removeAttr("disabled");
   				 $('#visitUnitLevel').removeAttr("disabled");
   				 return;
   			}
       	};
       	 $.ajax({
               	"dataType": 'json',
                   "type": "POST",
                   "data":{"params.visitUnit":sUnitName},
                   "url": scope._serverUrl+"reception/common_queryApplyByVisitUnit",
                   "success":function (result) {
                   	if(result.params.returnApply !=null ){
                   		 $('#visitUnitContact').val(result.params.returnApply.visitUnitContact);
                   		 $('#contactTele').val(result.params.returnApply.contactTele);
                   		 $('#visitUnitType').val(result.params.returnApply.visitUnitType);
                   		 $('#visitUnitLevel').val(result.params.returnApply.visitUnitLevel);
                   		 $('#visitUnitType').attr("disabled","disabled");
                   		 $('#visitUnitLevel').attr("disabled","disabled");
                   		 if(result.params.returnApply.majorGuest!=null){
                   			 $('#majorGuest').importTags(result.params.returnApply.majorGuest);
                       		 $('#'+formId).validate().element( "#majorGuest" ); 

                   		 }
                   		 if(result.params.returnApply.higherAccompanyLeader != null){
                   			 $('#higherAccompanyLeader').importTags(result.params.returnApply.higherAccompanyLeader);
                       		 $('#'+formId).validate().element( "#higherAccompanyLeader" ); 

                   		 }
                   		 $('#'+formId).validate().element( "#visitUnitType" ); 
                   		 $('#'+formId).validate().element( "#visitUnitLevel" ); 
                   		 $('#'+formId).validate().element( "#visitUnitContact" ); 
                   		 $('#'+formId).validate().element( "#contactTele" ); 

                   	}else{
       					$('#visitUnitType').removeAttr("disabled");
       					$('#visitUnitLevel').removeAttr("disabled");

                   	}
                   }, error: function(XMLHttpRequest, textStatus, errorThrown){  
                   	bootbox.alert("连接到服务器出现错误，请稍后再试。");
                   }
               });
   	}*/
   	);};
   	
   	//初始化控件，一定要初始化才能用，fromId是页面上form表单的id,scope是请求地址路径
this._init = function(fromId, scope, useIframe, serverUrl){
   	this._initSelect2(fromId,scope);
   };
  1. 需要引用的js文件
//如下的js和css文件可以再网上随便下载一个都能用，或者直接使用bootstrap框架里面的也可以的
<link rel="stylesheet" href="plugins/select2/select2.css">
<script src="plugins/select2/js/i18n/zh-CN.js" type="text/javascript"></script>
<script src="plugins/select2/select2.js" type="text/javascript"></script>
<script src="plugins/select2/select2.min.js" type="text/javascript"></script>

执行结果

(1)初始页面
在这里插入图片描述

(2)输入一个后台能匹配到的值，执行结果（当前下拉匹配到值）：
在这里插入图片描述
(2)当输入一个后台没有匹配到的值时，就会将当前值放入到下拉框作为新值选项赋值给文本框：
在这里插入图片描述
在这里插入图片描述
(3)可直接通过id获取到下拉框的值，然后执行保存数据操作：
$("#visitUnit").val();
在这里插入图片描述

上邪廊庑
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端下拉框select标签的插件——select2.js
Gorden的博客
11-30 2541
select2.js插件
elmentui 中 select 组件动态添加数据
weixin_42206013的博客
08-07 3569
elmentui 中 select 组件动态添加数据 业务场景 有一个选择用户名的下拉框，需要在下拉框中进行输入的时候判断输入的是否是一个新的值，如果是的话则进行用户数据的新增； 实现 思路：由于 select 组件新增时，新增的数据也会触发 change 事件，并且返回的值是输入的字符串，而用户数据是对象数组；所以根据 change 事件的参数与下拉框中的数据进行校验，如果无匹配项则进行数据的新增； 例子（使用的是 vue）： // html <el-select @change="changeSe
select2的基本用法 allowClear
hellojoy的博客
06-09 3564
select2的基本用法 公司有个项目需要用到类似百度搜索功能的下拉框，自然想到使用select2。 先看下select2的效果图，如下： 下来简单介绍下这个控件的基本用法，主要简单介绍下远程加载数据； 1.首先引入需要的文件:select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上. 2.远程加载数据示例 1 2 3 4 5 6 7 8 9 10
JQuery中使用select2插件功能之自动完成下拉框动态加载匹配(本地数据与远程数据结合)
代码充实生活的博客
05-21 1万+
前言 最近项目中遇到一个问题：前端加载页面的时候某些页面加载速度很慢，耗时很久；有些页面加载的飞快；因为上面所说的页面都是由同一个程式动态生成的，利用多线程同步机制完成不同的前端页面；因此当时就断定不是程式的大问题；应该是处理数据部分存在问题；在chrome浏览器一测；还真的是大数据的问题；进入页面就加载大批量数据进来；不仅增加数据库的负担 ，前后端处理数据也会造成一定的压力；因为有些函数把这些大...
element-ui关于el-select的下拉框选项中出现“无匹配数据”问题分析及解决办法
热门推荐
dongkaiyong的博客
10-01 3万+
最近的项目前端用到vue+elementui框架，在使用过程中遇到很多问题，在后几篇文章中会一一列出，有解决的，有没解决的。 先说关于select下拉框的问题：（项目原因无法截图） 具体现象是在某个下拉框下面会在显示完所有的下拉选项后出现一个额外的下拉框，里面显示“无匹配数据”。 先说一下问题原因：在你选中一个下拉选项后，由于功能需要更新了下拉框的option对应的值，并且你的select的v...
Bootstrap select2之下拉框可自定义输入和选择
初心不改
03-14 5133
bootstrap select2插件下拉框以及自定义输入的写法
可输入，可检索的下拉框小插件。
01-21
该插件能直接处理JSON数据，意味着开发者可以方便地将后台数据库中的结构化数据转换为下拉框的选项，无需额外的转换步骤，降低了开发难度。 4. **支持ie滚动条样式**： Internet Explorer（IE）的滚动条样式与其他...
动态从后台获取数据实现搜索下拉框
08-02
5. **实时搜索过滤**：当用户在输入框中输入时，前端需要实时监听输入事件，对后台返回的原始数据进行过滤，只显示与输入匹配的选项。这可以通过JavaScript的字符串操作函数（如`includes`、`startsWith`）实现，...
简洁的jQuery下拉框城市选择插件
06-10
这样，当用户做出选择后，开发者可以更方便地与后台数据库进行匹配，实现数据的正确提交和处理。 此外，该插件还支持添加选择城市后的回调事件。回调函数是在特定事件（如用户完成选择）发生时执行的函数，允许...
jquery 自动加载下拉框
04-01
1. **实时搜索**：用户在输入框中输入文字时，插件会根据输入内容动态地从服务器获取匹配的数据并填充到下拉框中。 2. **异步加载**：为了提高性能和响应速度，数据不是一次性全部加载，而是分页或者按需加载，只...
SearchSelect-master_select_juerysearchselect_
09-30
SearchSelect插件正是利用了这些特性，实现了在输入框中输入时实时更新搜索结果，以及点击后展示详细信息的功能。 在实际应用中，开发者可以根据项目需求自定义SearchSelect的样式和行为。例如，可以通过CSS调整...
【html】select标签选择框内显示空白，因为赋值了一个非选项内的值
weixin_44589672的博客
09-15 2058
【html】select标签选择框内显示空白的问题，因为重新赋值了一个非选项内的值。
select2的输入可下拉（modal框）--gxy
读书探究世界的博客
12-28 3507
html：<div class="form-group col-md-6 spanBox"> <span>顾客名字</span> <input type="text" name="usename" id="cunameValue" val="
三步解决在jsp中用select2实现下拉菜单动态模糊查询的问题
秦无解的博客
06-08 2847
jsp页面下拉框代码：（ ${horganList}是从后端接口model.addAttribute("horganList",horganList)获取的，如果初学者对于这里不太了解，可以稍微百度下）（不要在意马赛克，个人布局没布好，最后实在懒得改了，不影响使用）以上是中规中矩的正常展示效果，接着，就是将它修改为。如果觉得效果符合自身需求的，那么可以继续往下看。时候的前端样式和代码截图——首先，展示下摸索了半天后的。秦医如毒，无药可解。
自定义select弹出面板
u012681635的博客
03-15 781
自定义下拉列表: 选中项高亮、鼠标悬停项左侧标记，自定义滚动条样式 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>select</title> <style> body ...
select2插件的使用及方法整合
haogemr的博客
03-19 1427
select2的使用 <select name="" id=""></select> $('select').select2({ data: data, //传入数组，格式为[{id:'aaa',text:'aaa'},{id:'bbb',text:'bbb'}] placeholder: '请选择', //提示 multiple: true, /...
JavaScript和JSP使用技巧总结
何哥的博客
03-10 1328
前言：公司前端只会BootStrap写的html+css，不是前后端分离的开发模式，所以只能自己搞JSP和JavaScript，有点浪费光阴。不过心态要摆正，既来之则安之，总结几个常用的JavaScript和JSP的常用知识以便日后查看。 1、如何等待ajax异步完成再执行相应操作 要先引入jQuery.js //ajax操作 myajax = $.ajax( { url: "", async:false, ty
Jsp之select二级联动
技术刘的博客
01-23 3282
select联动在实际项目中是再熟悉不过了，经常要使用到，每次都要去整理，梳理，会花费一些不必要的时间。然而select标签的使用，在不同的开发中也不一样，比如在vue中跟jsp中，今天主要是梳理在jsp中的应用，vue的使用也是类似。 当然，方法有很多种，下面这种方法是我个人比较经常使用的，需要的朋友可以参考借鉴。 一：假设现在jsp中有两个类别，一级类别和二级类别，二级类别跟随一级类别联动...
【前端】Select2组件下拉框实现多选，及取值赋值；
qq_42600856的博客
11-13 2746
Select2下拉框实现多选，及取值赋值。 需求：为了完成下拉框可搜索、多选，及取值赋值。 1、引入js文件 <link rel="stylesheet" href="${ctx}/static/select2/select2.min.css"></link> <script type="text/javascript" charset="utf-8" src="${ctx}/static/select2/select2.js"></script> 2、
el-select下拉框列表加载后台数据
最新发布
09-08
el-select是Element UI中的一个下拉框组件，可以通过它来选择...通过以上步骤，就可以实现将后台数据加载到el-select的下拉列表中，使用户可以从列表中方便地选择数据项。这样可以提升用户体验，使界面更加友好和易用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值