js实现自动补全及手风琴效果

最新推荐文章于 2021-02-25 17:20:19 发布
最新推荐文章于 2021-02-25 17:20:19 发布
阅读量128 收藏
点赞数
文章标签： html jquery css jsp ViewUI 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'baidu.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
}

ul,li {
	list-style: none;
}

body {
	font-size: 14px;
	font-family: "微软雅黑"
}

/*设置背景*/
.bg {
	/* background:
		url("http://imgstore.cdn.sogou.com/app/a/100540002/714894.jpg")
		no-repeat; */
	background: url("image/bg.jpg") no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	z-index: -1;
}

#container {
	width: 640px;
	height: 70px;
	margin: 260px auto;
}

.inputs {
	width: 560px;
	height: 45px;
	border: none;
	float: left;
	text-indent: 1em;
	font-family: "微软雅黑";
	box-shadow: inset 0 0 1em #ccc
}

.searchBtn {
	height: 45px;
	background: #fff;
	display: inline-block;
	float: left;
	width: 77px;
	text-align: center;
	line-height: 45px;
	border-left: 1px solid #ccc;
	font-size: 16px;
}

.searchBox {
	border: 1px solid #ccc;
	height: 45px;
}

#autoBox {
	display: none;
}

#autoBox li {
	height: 35px;
	border-bottom: 1px solid #ccc;
	line-height: 35px;
	padding-left: 10px;
	font-size: 12px;
}

#autoBox li:HOVER {
	background: #eaeaea;
}

.itemBox {
	width: 300px;
	background: #fff;
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
}

.itemBox li {
	overflow: hidden;
}

.items {
	height: 32px;
	border-bottom: 1px solid #ccc;
	line-height: 32px;
	transition: all 1s ease;
	padding-left: 20px;
	position: relative;
	padding-left: 20px;
	position: relative;
}

.showpan {
	position: absolute;
	top: 0;
	left: 260px;
	width: 100%;
	height: 100%;
	background: red;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
	$(function() {
		$(".items").append("<div class='showpan'></div>");
		$(".items").hover(function() {
			$(this).find(".showpan").css("background", randomColor()).stop(true, true).animate({
				left : 0
			});
		}, function() {
			$(this).find(".showpan").css("background", randomColor()).stop(true, true).animate({
				left : 260
			});
		});
		function randomColor() {
			var r = Math.floor(Math.random() * 256);
			var g = Math.floor(Math.random() * 256);
			var b = Math.floor(Math.random() * 256);
			return "rgb(" + r + "," + g + "," + b + ")";
		}
	});
	window.onload = function() {
		//实现jquery中的css方法
		var keyBoxDOM = function(id) {
			var dom = document.getElementById(id);
			return {
				css : function(opts) {
					for ( var key in opts) {
						var v = opts[key];
						if (typeof v == "number") {
							v += "px";
						}
						dom["style"][key] = v;
					}
				}
			}
		}
		window.keyBoxDOM = keyBoxDOM;
		//获取input输入框
		var keybox = document.getElementById("keyBox");
		//获取自动提示框
		var autobox = document.getElementById("autoBox");
		//获取下拉框
		var ulbox = document.getElementById("ulBox");
		//获取按钮ID
		var btnChang = document.getElementById("btnChang");
		var index = -1;
		//var index = 0;
		//重新绑定事件
		keybox.onkeyup = autoComplete;
		keybox.onkeydown = autoComplete;
		function autoComplete() {
			//拿到input 的宽度和高度
			var inw = this.offsetWidth;
			var inh = this.offsetHeight;
			//输入框值
			var value = this.value;
			//验证
			var check = value.match(/@/ig);
			if (check && check.length > 1) {
				this.value = value.substring(0, value.length - 1);
				return;
			}
			if (value.indexOf("@") != -1) {
				keyBoxDOM("autoBox").css({
					display : "block",
					width : inw,
					height : "215",
					marginTop : 45,
					background : "#f9f9f9"
				})
				//拼接数据
				var html = getMailHTML(value);
				ulbox.innerHTML = html;
				//动态绑定事件
				var lis = ulbox.children;
				for (var i = 0; i < lis.length; i++) {
					lis[i].onclick = function() {
						keybox.value = this.innerHTML;
						keybox.onkeyup = autoComplete;
						keybox.onkeydown = autoComplete;
					}
				}
			}
		}
		//通过键盘控制
		document.onkeyup = function(e) {
			//键码38 40
			var ev = e || window.event;
			var code = ev.keyCode || ev.which;
			//获取所有的li
			var lis = ulbox.children;
			/* if (code == 40) {//向下
				keybox.onkeyup = null;
				keybox.onkeydown = null;
				if (index == lis.length) {
					index = 0;
				}
				for (var i = 0; i < lis.length; i++) {
					lis[i].style.background = "none";
				}
				lis[index].style.background = "#ccc";
				keybox.value = lis[index].innerHTML;
				index++;

			}
			if (code == 38) {//向上

			} */
			if (code == 40) {//向下
				keybox.onkeyup = null;
				keybox.onkeydown = null;
				if (index == lis.length - 1) {
					index = 0;
				} else {
					index++;
					if (index > lis.length - 1) {
						index = 0;
					}
				}
				if (index != -1) {
					for (var i = 0; i < lis.length; i++) {
						lis[i].style.background = "none";
					}
					lis[index].style.background = "#ccc";
					keybox.value = lis[index].innerHTML;
				}
			}
			if (code == 38) {//向上
				if (index == -1) {
					index = lis.length - 1;
				} else {
					index--;
					if (index < 0) {
						index = lis.length - 1;
					}
				}
				if (index != -1) {
					for (var i = 0; i < lis.length; i++) {
						lis[i].style.background = "none";
					}
					lis[index].style.background = "#ccc";
					keybox.value = lis[index].innerHTML;
				}
			}
			if (code == 13) {//回车键
				autobox.style.display = "none";
			}
		}
		function getMailHTML(value) {
			var arr = [ "163.com", "126.com", "qq.com", "gmail.com", "sohu.com", "sina.com" ];
			var html = "";
			for (var i = 0; i < arr.length; i++) {
				//html += "<li onclick='selectMe(this);'>" + value + arr[i] + "</li>";
				html += "[*]" + value + arr[i] + "
";
			}
			return html;
		}
		//静态绑定
		function selectMe(obj) {
			document.getElementById("keybox") = obj.innerHTML;
		}
		autobox.onmouseleave = function() {
			this.style.display = "none";
		}
		btnChang.onmouseover = function() {
			this.style.background = "#eaeaea";
		}
		btnChang.onmouseleave = function() {
			this.style.background = "#f9f9f9";
		}
	}
</script>
</head>

<body>
	<!-- 设置背景 -->
	<div class="bg"></div>
	<div id="container">
		<div class="searchBox" style="">
			<input type="text" class="inputs" id="keyBox" placeholder="请输入邮箱" />[url=" class=]搜索[/url]
			<div id="autoBox">
				<ul id="ulBox">
				</ul>
			</div>
		</div>
	</div>
	<div>
		<ul class="itemBox">
			<li class="items">0</li>
			<li class="items">1</li>
			<li class="items">2</li>
			<li class="items">3</li>
			<li class="items">4</li>
			<li class="items">5</li>
			<li class="items">6</li>
			<li class="items">7</li>
			<li class="items">8</li>
			<li class="items">9</li>
			<li class="items">0</li>
			<li class="items">1</li>
			<li class="items">2</li>
			<li class="items">3</li>
			<li class="items">4</li>
			<li class="items">5</li>
			<li class="items">6</li>
			<li class="items">7</li>
			<li class="items">8</li>
			<li class="items">9</li>
			<li class="items">0</li>
			<li class="items">1</li>
			<li class="items">2</li>
		</ul>
	</div>
</body>
</html>
u014459038
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js手风琴菜单
qq_40962557的博客
10-10 1826
JS实现手风琴下拉菜单。 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;My手风琴菜单&lt;/title&gt; &lt;/head&gt; &lt;body&
jquery、css、scss实现简单手风琴效果
11-21
运用juqery，css，scss，html实现简单的手风琴效果
JavaScript+CSS+HTML 编写手风琴效果
 我的博客
12-15 258
效果图： 可以通过https://littlehiuman.github.io/03-Accordion/查看效果。 https://github.com/littleHiuman/littleHiuman.github.io求点star~~~ 代码如下： * { margin: 0; padding: 0; } .container { position: relative; width: 520px; height: 400px; overfl...
JavaScript JS手风琴图片展示效果代码
05-06
JavaScript JS手风琴图片展示效果代码 JavaScript手风琴图片展示效果代码，确实效果不错的东西，鼠标放到风琴的每一个键位上，会滑出清淅大图，整体效果动感十足，这种排列方式称之为横向手风琴，还有竖向的，特效用了几个比较大的图片，因此压缩包比较大。
Jquery实现的非常漂亮的手风琴效果源码
05-13
使用jquery实现的非常漂亮的手风琴效果源码，包含Demo。
JQueryUI组件 JS下载
02-07
- **Accordion（手风琴）**: 可折叠的面板，允许用户逐个展开或全部隐藏内容。 - **Tabs（选项卡）**: 将内容分隔成多个可切换的面板，提高页面组织性。 - **Slider（滑块）**: 用于选择数值或进行等级评价的滑动...
js各种插件
04-28
这种插件实现了手风琴式的折叠展开效果，通常用于显示和隐藏内容，节省空间并增强页面的可读性。 9. **map百度地图封装js**： 百度地图API提供了一个JavaScript接口，用于在网页中集成地图功能。封装后的js可能...
移动端组件
01-07
搜索组件与查询组件类似，但可能包含更多高级功能，如自动补全、过滤选项等。在大型数据集的搜索场景中，它能提供更高效的搜索体验。 9. **提示组件**： 提示组件用于显示临时通知，如信息提示、成功消息、错误...
jQueryUIAssignment:这是一些 jQueryUI 练习
06-25
jQueryUI 是基于 jQuery 的开源库，它提供了丰富的 UI 组件，如可定制的按钮、滑块、 accordions（手风琴）和 tabs（标签页）。这些组件通过 jQuery 的选择器和事件处理能力，使开发者能够轻松实现复杂的页面交互。...
jquery插件jquery-ui-1.8.2.custom.min.js
05-22
Widgets是jQuery UI的核心，包括Accordion（手风琴效果）、Autocomplete（自动补全）、Dialog（对话框）等。Effects则提供了各种动画效果，如Fade（淡入淡出）、Slide（滑动）等。Position模块提供了元素相对定位的...
页面手风琴效果
03-04
页面手风琴效果，很酷炫的效果，可以使用在网页banner的位置
【JQuery】jQuery自制简易手风琴效果(附实现原理)
热门推荐
LZGS_4的专栏
08-30 1万+
简易手风琴效果，附实现原理
HTML和CSS+JS创建手风琴式菜单
Aruko的博客
08-08 1181
HTML部分(含JS) CSS部分（选择器部分和阿里图标库部分） 如下所示的简易手风琴菜单 HTML部分 我是在JSP页面上写的 注：JavaScript的代码是我直接找的别人的，我并没有学过JS所以也不懂 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!doctype html> <html> <head> <me
jQuery插件的使用 --- 手风琴的效果
韩晓爽的专栏
03-26 745
jQuery插件的使用 --- 手风琴的效果 在使用jQuery插件之前要导入需要的js文件和css文件，代码如下： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPor
原生js实现手风琴菜单效果 与 css3的过渡实现手风琴效果
lgdshr123的博客
11-01 6118
最近学了css3的变形、过渡和动画，写了一个用css3手风琴菜单的效果，又想着用原生JavaScript来实现手风琴菜单效果。感觉挺有意思的，现在给大家分享一下。 1、css3实现手风琴效果 style> *{margin: 0;padding: 0;list-style: none;} .box {width: 500px; background: #1c47ff;mar
java手风琴代码_JavaScript实现手风琴效果
weixin_39626089的博客
02-25 435
本文实例为大家分享了JavaScript实现手风琴效果的具体代码，供大家参考，具体内容如下代码：Document* {margin: 0;padding: 0;}ul {width: 100%;text-align: center;}ul li {list-style: none;overflow: hidden;display: inline-block;transition: all 1s;}...
用js实现图片手风琴效果
最新发布
04-22
3. 可以通过CSS样式或JS动态修改图片的大小和位置，实现手风琴效果。 下面是一个简单的示例代码： HTML代码： ``` ``` CSS样式： ``` .accordion li { float: left; width: 20%; height...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值