Jquery+CSS 自定义联想搜索框，带删除图标，多个form表单ajaxsbumit

最新推荐文章于 2025-06-02 15:24:16 发布

lanqibaoer

最新推荐文章于 2025-06-02 15:24:16 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS前端开发

本文链接：https://blog.youkuaiyun.com/lanqibaoer/article/details/51149522

JS前端开发专栏收录该内容

53 篇文章

订阅专栏

</pre><pre name="code" class="html"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<base href="<%=basePath%>">
	<%@ include file="../../system/admin/top.jsp"%>
	<link href="resources/css/resblock/resblock-720.css" rel="stylesheet">
	<link rel="stylesheet" href="resources/assets/css/font-awesome.css" />
	<link rel="stylesheet" href="resources/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
	<style type="text/css">
 	  .dele_pic {
		    display: none;
		    height: 16px;
		    left: 315px;
		    position: absolute;
		    top: 35px;
		    width: 16px;
		    z-index: 12;
		    cursor:pointer;
		}
		.worksbox {
		    position: relative;
		}
	</style>
</head>
<body>
<div class="div-body">
	<div class="div-top">
		<div class="div-top-left lighter block blue">
			 <font size="+1"><a href="picture/resblockCircleView.do">720度环景图</a></font>
			 <i class="icon-double-angle-right"></i>新增环景图
		</div>
		<div class="div-top-center"><a id="newBtn" href="javascript:void(0);" onclick="createRow();" class="btn btn-small btn-info"><i class="icon-pencil"></i>新增</a></div>
		<div class="div-top-right" style="color: red;">
			<span><b>请注意：1.上传附件大小在50M以内。 2.上传压缩包中尽量不包含中文命名的文件夹或文件。</b><span>
			<!-- <a href="picture/resblockCircleView.do" class="btn btn-small btn-purple" title="返回"><i class="icon-arrow-left icon-on-left"></i>返回720度列表</a> -->
		</div>
	</div>
	
	<div class="div-center">
		<div class="center-outside">
		  <form class="uploadForm" method="post" enctype="multipart/form-data">
			<div class="center-left worksbox" >
			名称：
			<input type="text" autocomplete="off" class="resblockName" name="resblockName"  data-placeholder="请输入名称..." onKeyUp="keyUp(this)" style="width: 250px;" onchange="validChange(this);" />
			<input type="hidden" class="resblockId" name="resblockId" />
			<input type="hidden" class="belongType" name="belongType"/>
			<input type="hidden" class="validResblockName" name="validResblockName" />
			<div class="myDiv" align="left" style="display:none;"></div>
			<img onclick="deletPic(this);" src="resources/css/resblock/delete.png" class="dele_pic">
			</div>
			<div class="center-center"><input type="file" name="file"  class="tp" onchange="fileType(this)" style="widht:250px;"/></div>
			<div class="center-right"><span name="uploadmsg" class="upload-msg-span" style="display: block;"></span></div>
		 </form>
		</div>
		
	</div>
	<div class="div-bottom">
		<div class="row" >
			<a id="bsubmit" class="btn btn-small btn-info" onclick="save();"><i class="icon-save"></i>确定上传</a>
			      <a class="btn btn-small btn-cancel" href="picture/resblockCircleView"><i class="icon-undo "></i>返   回</a>
		</div>
	</div>
</div>
</body>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/assets/js/ace/elements.fileinput.js"></script>
<script src="resources/assets/js/ace/ace.js"></script>
<script type="text/javascript" src="resources/js/baiduTemplate.js?v=20160408"></script>
<script type="text/javascript" src="resources/js/jquery.form-3.51.0.js?v=20160408"></script>
<script type="text/html" id="appendUpload">
<div class="center-outside">
 <form class="uploadForm" method="post" enctype="multipart/form-data">
	<div class="center-left worksbox">
			名称：
			<input type="text" autocomplete="off" class="resblockName" name="resblockName" data-placeholder="请输入名称..." onKeyUp="keyUp(this)" style="width: 250px;" onchange="validChange(this);" />
			<input type="hidden" class="resblockId" name="resblockId" />
			<input type="hidden" class="belongType" name="belongType"/>
			<input type="hidden" class="validResblockName" name="validResblockName" />
			<div class="myDiv" align="left" style="display:none;"></div>
			<img onclick="deletPic(this);" src="resources/css/resblock/delete.png" class="dele_pic" >
	</div>

	<div class="center-center"><input type="file" name="file" class="tp" onchange="fileType(this)" style="widht:250px;"/></div>
	<div class="center-right"><span name="uploadmsg" class="upload-msg-span" style="display: block;"></span></div>
 </form>
</div>
</script>
<script type="text/javascript">
$(top.hangge());


//拼接html --start{{
var bt=baidu.template;  

//设置左分隔符为 <!  
bt.LEFT_DELIMITER='<!';  

//设置右分隔符为 <!    
bt.RIGHT_DELIMITER='!>';  


var rowCount=1;

function createRow(){
	if(rowCount==10){
		alert("最多新增10条数据");
		return false;
	}
	var html=bt('appendUpload',{});
	$(".div-center").append(html);
	//上传
	findUploadStyle();
	rowCount++;
	
}

function deletPic(obj){
	$(obj).parent().find(".myDiv").attr("style","display:none");
	$(obj).hide();
}

//生成上传文件选择框样式
function findUploadStyle(){
	$('.tp').ace_file_input({
		no_file:'请上传zip格式压缩包 ...',
		btn_choose:'选择',
		btn_change:'更改',
		droppable:false,
		onchange:null,
		thumbnail:false,
		whitelist:'zip',
	});
}

function fileType(obj){
	var fileType=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
    if(fileType != '.zip'){
    	$(obj).tips({
			side:3,
            msg:'请上传zip格式压缩包 ',
            bg:'#AE81FF',
            time:3
        });
    	$(obj).val('');
    	
    }
}


$(function() {
	//上传
	findUploadStyle();
});




function validChange(obj){
	var resblockName=$(obj).val();
	var validResblockName=$(obj).parent().find(".validResblockName");
	var resblockId=$(obj).parent().find(".resblockId");
	if(resblockName!=validResblockName.val()){
		validResblockName.attr("value","");
		resblockId.attr("value","");
	}
}

function isShowDiv(obj){
	$(obj).find(".myDiv").attr("style","display:none;");
}


//模糊查询输入框 keyup事件
function keyUp(obj){
	//获取当前文本框的值
	var search=$(obj).val();
	//获取div
	var div=$(obj).parent().find(".myDiv");
	
	var delePic=$(obj).parent().find(".dele_pic");
	//id
	var resblockId=$(obj).parent().find(".resblockId");
	if(search==null || search==""){
		resblockId.attr("value","");
		div.html("");
		div.hide();
		div.css("style","display:none;");
		delePic.hide();
	}
   if(search!=null && search!=""){
		//拼接要放在div的数据
		var divhtml = "";
		$.ajax({
			async : false,
			type : "POST",
			url : "picture/findResblockList.do",
			data : {
				"search" : search
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert("程序异常，请重试");
			},
			success : function(data) {
				if(data!=null && data.result!=null){
					var resblockList=new Array();
					resblockList=data.result;
					if(resblockList==null || resblockList.length==0){
						divhtml+="<div align='center'>未查到数据</div>";
					}else{
						$.each(resblockList,function(i,value){
							var resblockName=value.resblockName;
							var resblockId=value.id;
							var belongType=value.belongType;
							if(belongType==null){belongType="";}
							divhtml+="<div><a href='javascript:void(0);' onclick=javascript:getValue('"+resblockName+"',"+resblockId+",'"+belongType+"',this);>"+resblockName+"</a></div>";							
						});	
					}
				}
				div.html(divhtml);
				div.show();
				div.css("style","display:block;"); 
				delePic.show(); 
			}
		});
   }
}
function getValue(resblockName,resblockId,belongType,obj){
	$(obj).parent().parent().parent().find(".resblockName").attr("value",resblockName);
	$(obj).parent().parent().parent().find(".resblockId").attr("value",resblockId);
	$(obj).parent().parent().parent().find(".belongType").attr("value",belongType);
	$(obj).parent().parent().parent().find(".validResblockName").attr("value",resblockName);
	delayHideDiv(obj);
} 

//延迟关闭div 失去焦点延迟200毫秒隐藏div
function delayHideDiv(obj) {
	var div=$(obj).parent().parent().parent().find(".myDiv").attr("style","display:none;");
	$(obj).parent().parent().parent().find(".dele_pic").hide();
	/* setTimeout("$(div).attr('style','display:none;');", 200); */
	$(obj).parent().parent().parent().find(".myDiv").html("");
}
var resblockCount=0;
var times=null;
function save(){
	var ipts = $('.resblockName'), repeat = '';
    $(".resblockName").each(function () {
        if (ipts.filter('[value="' + this.value + '"]').size()>1) {
            repeat = this.value;
            return false;
        }
    });
    if (repeat !== ''){ 
    	alert('有重复名称，为：' + repeat + '！');
    	return false;
    }
	if(confirm("上传压缩包文件大，耗时长，需要您耐心等待，确定要上传吗？")){
		times=window.setInterval("findInputLength()",1000);
		//上传按钮置灰，新增按钮置灰
		$("#bsubmit").attr("disabled" , true).html("<i class=\"icon-spinner icon-spin\"></i> 正在提交中...").attr("onclick","");
		//$("#bsubmit").attr("disabled" , true).attr("onclick","");
		$("#newBtn").attr("disabled" , true).attr("onclick","");
		//console.log("总共上传"+$(".uploadForm").size()+"个文件");
		$(".uploadForm").each(function(index){//form-index
			//判断房源编号和压缩包是否有值
			var resblockId=$(this).find(".resblockId").val();
			var fileName=$(this).find(".tp").val();
			//console.log("*****进入each循环======第【"+(index+1)+"】个");
			if(fileName=='' || resblockId==''){
				$(".upload-msg-span").eq(index).attr("style","color:red;").html("<i class=\"fa fa-times\"></i>名称及文件必选。");
				resblockCount++;
				//console.log("*****第【"+(index+1)+"】前端校验失败");
				return true ;
			}
			//console.log("*****开始上传第【"+(index+1)+"】个文件");
			$(this).ajaxSubmit({  
				url:"<%=basePath%>picture/saveResblock720.do",
				iframe: true,
		        enctype:'multipart/form-data',
		        success:function(data, statusText) {
		        	var resultMsg="";
		           	if(data!=null){
		           		resultMsg=data.resultMsg;
		           		if(data.resultStatus==200){
		           			resultMsg="<i class=\"icon-ok\"></i>"+resultMsg;	
		           			$(".upload-msg-span").eq(index).attr("style","color:blue;").html(resultMsg);
		           		}else{
		           			resultMsg="<i class=\"fa fa-times\"></i>"+resultMsg;
		           			$(".upload-msg-span").eq(index).html(resultMsg);
		           		}
		           		resblockCount++;
		           		//console.log("*****上传第【"+resblockCount+"】个文件成功");
		           	}
		           	
		        },error: function(arg1, arg2, ex) {
		        	var resultMsg="<i class=\"fa fa-times\"></i>上传异常，请重试。";
		        	$(".upload-msg-span").eq(index).html(resultMsg);
		        	resblockCount++;
		        	//console.log("*****上传第【"+resblockCount+"】个文件失败");
		        },
		        dataType: 'json'
		   });
		});
	}
}

function findInputLength(){
	if(resblockCount==$(".uploadForm").size()){
		// 文件上传结束后的 按钮修改
		$("#bsubmit").html("<i class=\"icon-ok\"></i>上传结束");
		window.clearInterval(times);  
	}
}

/* 

//保存图
function addBuildingFile(){
	if(!$(".tp").val() || document.getElementById("tp").files[0] =='请上传zip格式压缩包'){
		$(".tp").tips({
			side:3,
            msg:'请上传zip格式压缩包',
            bg:'#AE81FF',
            time:3
        });
		return false;
	}
	$("#Form").submit();
	$("#zhongxin").hide();
	$("#zhongxin2").show();
}*/
</script>
</html>

resblock-720.css

@charset "utf-8";

.div-body{
	overflow:auto;
	height:100%;
	min-height:600px;
	border: 0px solid #c0c0c0;
}

.div-top{
	overflow:auto;
	height:10%;
   	min-height:40px;
   	border: 0px;
   	border:0px solid #c0c0c0;
   	padding:6px;
   	margin-left: 10px;
}
.div-center{
	/* margin: 0 auto ;*//* 居中 */
	margin-top:1px;
	width: auto;
	height:60%;
	min-height: 50px;
	border: 0px solid #c0c0c0;
	/* text-align:center; */
	padding:6px;
}
.div-bottom{
	/* margin: 0 auto ; *//* 居中 */
	margin-top:1px;
	width: auto;
	height:20%;
	min-height: 80px;
	border: 0px solid #c0c0c0;
	margin-left:100px;
	/* text-align:center; */
	padding:6px;
}

.div-top-left{
	width: 22%;
	min-width:100px;
	height:100%;
   	min-height:40px;
   	float:left;
	border-right: 0px solid #c0c0c0;
	margin-left:5px;
	margin-right:3px;
	text-align:left;
}
.div-top-center{
	width: 10%;
	min-width:100px;
	height:100%;
   	min-height:40px;
   	float:left;
	border-right: 0px solid #c0c0c0;
	text-align:left;
}

.div-top-right{
	overflow:auto;
	height:90%;
   	min-height:35px;
   	float:left;
	border-right: 0px solid #c0c0c0;
	text-align:center;
	padding: 4px;
}
.center-outside{
	overflow:auto;
	margin-top:1px;
	min-height: 45px;
	border: 0px solid #c0c0c0;
	text-align:center;
	padding:6px;
	margin-bottom: 5px;
}


.center-left{
	width:30%;
	min-width:350px;
	height:100%;
	min-height:43px;
	float: left;
	text-align:center;
	border: 0px solid #c0c0c0;
	/* padding:10px; */
}

.center-center{
	width:40%;
	min-width:500px;
	height:100%;
	min-height:43px;
	float: left;
	margin-left:2px;
	text-align:center;
	border: 0px solid #c0c0c0;
	/* padding:10px; */
}

.center-right{
	overflow:auto;
	min-width:150px;
	height:100%;
	min-height:37px;
	float: left;
	margin-top:6px;
	margin-left:2px;
	text-align:center;
	border:0px solid #c0c0c0;
}

.upload-msg-span{
	/* padding: 2px; */
	line-height: 20px;
	color: red;
}

/**定义模糊搜索时显示的div样式*/
.myDiv {
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	background: #FFF0D9;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-face-color: #FFF0D9;/*滚动条前景色*/
	position: relative;
	z-index: 10;
	width:260px;
	height:200px;
	margin-left:85px;
	font-size: 14px;
}

.myDiv a {
	text-decoration: none;
	display: block;
	height: 18px;
	line-height: 18px;
	text-indent: 4px;
	text-align: left;
}

.myDiv a:link, .myDiv a:visited {
	color: #2A1B00;
	background-color: #FFF0D9;
}

.myDiv a:hover, .myDiv a:active {
	background-color: #C2C660;
}