java基础回顾之bootstrap自动补全typehead技术

最新推荐文章于 2020-12-24 02:43:22 发布

武侠㿝卄清

最新推荐文章于 2020-12-24 02:43:22 发布

阅读量315

点赞数

分类专栏： java web开发

本文链接：https://blog.csdn.net/qq_30347133/article/details/109079785

版权

web开发同时被 2 个专栏收录

611 篇文章 2 订阅

订阅专栏

java

574 篇文章 4 订阅

订阅专栏

在这里插入图片描述
js代码：

$("#customerName").typeahead({
            source: function (query, process) {
                // ["阿里巴巴","阿里巴巴北京分公司"]
                $.post("workbench/transaction/getCustomerByLikeName.do", { "name" : query }, function (array) {
                	process(array);
                });
            },
            delay: 500
        });
		
		$("#saveBtn").click(function(){
			// 提交form表单
			$("#tranForm").submit();
		});

<%@page import="java.util.Set"%>
<%@page import="java.util.Map"%>
<%@page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

<%-- typeahead --%>
<script type="text/javascript" src="jquery/bs3_typeahead/bootstrap3-typeahead.min.js"></script>

<script type="text/javascript">

	/*
	var userJson = {
			"username" : "zhangsan"
	}; 
	alert(userJson.username);
	alert("username = " + userJson["username"]);
	*/
	
	var possibilityJson = {
			<%
				Map<String,String> pMap = (Map<String,String>)application.getAttribute("pMap");
				Set<String> keys = pMap.keySet();
				for(String key : keys){
					String value = pMap.get(key);
			%>
			"<%=key%>" : <%=value%>,			
			<%
				}
			%>
	};

	$(function(){
		$(".time").datetimepicker({
			 language: 'zh-CN',//显示中文
			 format: 'yyyy-mm-dd',//显示格式
			 minView: "month",//设置只显示到月份
			 initialDate: new Date(),//初始化当前日期
			 autoclose: true,//选中自动关闭
			 todayBtn: true,//显示今日按钮
			 clearBtn : true
		});
		$(".time2").datetimepicker({
			 language: 'zh-CN',//显示中文
			 format: 'yyyy-mm-dd',//显示格式
			 minView: "month",//设置只显示到月份
			 initialDate: new Date(),//初始化当前日期
			 autoclose: true,//选中自动关闭
			 todayBtn: true,//显示今日按钮
			 clearBtn : true,
			 pickerPosition : "top-right"
		});
		
		// 页面加载完毕之后专门给所有者定位
		// $("#owner").val("${user.id}");
		
		$("#stage").change(function(){
			// var stage = this.value;
			var stage = $(this).val();
			// 通过阶段获取可能性。（阶段不同可能性不同。）
			// var possibility = ${applicationScope.pMap.stage}; // 这种方式不行，EL表达式中执行的是java程序，java在JVM中执行，执行java程序结束之后打印输出到浏览器上HTML，然后浏览器才能够开始执行。
			var possibility = possibilityJson[stage];
			// 将可能性放到文本框当中。
			$("#possibility").val(possibility);
		});
		
		$("#customerName").typeahead({
            source: function (query, process) {
                // ["阿里巴巴","阿里巴巴北京分公司"]
                $.post("workbench/transaction/getCustomerByLikeName.do", { "name" : query }, function (array) {
                	process(array);
                });
            },
            delay: 500
        });
		
		$("#saveBtn").click(function(){
			// 提交form表单
			$("#tranForm").submit();
		});
		
	});
</script>

</head>
<body>

	<!-- 查找市场活动 -->	
	<div class="modal fade" id="findMarketActivity" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" class="form-control" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable3" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>发传单</td>
								<td>2020-10-10</td>
								<td>2020-10-20</td>
								<td>zhangsan</td>
							</tr>
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>发传单</td>
								<td>2020-10-10</td>
								<td>2020-10-20</td>
								<td>zhangsan</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<!-- 查找联系人 -->	
	<div class="modal fade" id="findContacts" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找联系人</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" class="form-control" style="width: 300px;" placeholder="请输入联系人名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>邮箱</td>
								<td>手机</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>李四</td>
								<td>lisi@bjpowernode.com</td>
								<td>12345678901</td>
							</tr>
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>李四</td>
								<td>lisi@bjpowernode.com</td>
								<td>12345678901</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	
	
	<div style="position:  relative; left: 30px;">
		<h3>创建交易</h3>
	  	<div style="position: relative; top: -40px; left: 70%;">
			<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
			<button type="button" class="btn btn-default">取消</button>
		</div>
		<hr style="position: relative; top: -40px;">
	</div>
	<form action="workbench/transaction/save.do" id="tranForm" method="post" class="form-horizontal" role="form" style="position: relative; top: -30px;">
		<div class="form-group">
			<label for="create-transactionOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="owner" name="owner">
				<c:forEach items="${userList }" var="userObj">
				<option value="${userObj.id }" ${userObj.id eq user.id ? "selected" : ""}>${userObj.name }</option>
				</c:forEach>
				</select>
			</div>
			<label for="create-amountOfMoney" class="col-sm-2 control-label">金额</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="money" name="money">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="name" name="name">
			</div>
			<label for="create-expectedClosingDate" class="col-sm-2 control-label">预计成交日期<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control time" id="expectedDate" name="expectedDate">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-accountName" class="col-sm-2 control-label">客户名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input autocomplete="off" type="text" class="form-control" id="customerName" name="customerName" placeholder="支持自动补全，输入客户不存在则新建">
			</div>
			<label for="create-transactionStage" class="col-sm-2 control-label">阶段<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
			  <select class="form-control" id="stage" name="stage">
			  	<option value=""></option>
			  	<c:forEach items="${stageList }" var="stage">
			  	<option value="${stage.value }">${stage.text }</option>
			  	</c:forEach>
			  </select>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionType" class="col-sm-2 control-label">类型</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="type" name="type">
				<option value=""></option>
			  	<c:forEach items="${transactionTypeList }" var="transactionType">
			  	<option value="${transactionType.value }">${transactionType.text }</option>
			  	</c:forEach>
				</select>
			</div>
			<label for="create-possibility" class="col-sm-2 control-label">可能性</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="possibility" readonly="readonly">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-clueSource" class="col-sm-2 control-label">来源</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="source" name="source">
				<option value=""></option>
			  	<c:forEach items="${sourceList }" var="source">
			  	<option value="${source.value }">${source.text }</option>
			  	</c:forEach>
				</select>
			</div>
			<label for="create-activitySrc" class="col-sm-2 control-label">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);" data-toggle="modal" data-target="#findMarketActivity"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="activityId" name="activityId" value="9312e2e72987422288679a58fb134928">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactsName" class="col-sm-2 control-label">联系人名称&nbsp;&nbsp;<a href="javascript:void(0);" data-toggle="modal" data-target="#findContacts"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="contactsId" name="contactsId" value="0d2af02e4ecd42108df23cf9b241b08b">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-describe" class="col-sm-2 control-label">描述</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="description" name="description"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="contactSummary" name="contactSummary"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control time2" id="nextContactTime" name="nextContactTime">
			</div>
		</div>
		
	</form>
</body>
</html>

武侠㿝卄清

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
java基础回顾之bootstrap自动补全typehead技术

js代码：$("#customerName").typeahead({ source: function (query, process) { // ["阿里巴巴","阿里巴巴北京分公司"] $.post("workbench/transaction/getCustomerByLikeName.do", { "name" : query }, function (array) { p.
复制链接

扫一扫