jquery简单的查找匹配职位（招聘网站）

最新推荐文章于 2022-03-26 20:12:00 发布

荒~

最新推荐文章于 2022-03-26 20:12:00 发布

阅读量113

点赞数

分类专栏： # jQuery # HTML

原文链接：https://blog.csdn.net/weixin_41641581/article/details/80002673?spm=1001.2014.3001.5501

版权

jQuery 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

html：
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>searchWork</title>
		<script src="http://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			ul,li{list-style: none;}
			.content{width: 40%;margin: 30px auto;position: relative}
			.main{border: 1px solid #ddd;background: #f2f2f2;position: absolute;top:40px;display: none}
			.search-content{padding:15px;}
			.content form input{width: 50%;padding: 5px;}
			.work-list{overflow: hidden;padding:5px;}
			.work-list li{width:20%;float: left;padding:5px 10px;cursor:pointer}
			.work-list li:hover,.search-work-list li:hover{background: #7BA7AB;color: #fff;}
			.search-work-list{width:50%;border: 1px solid #ddd;padding:6px;background: #fff;position: absolute;top:50px;display:none}
			.search-work-list li{padding: 5px;cursor:pointer}
		</style>
	</head>
	<body>
		<div class="content">
			<form action="javascript:">
				<input type="text" name="work" id="work" placeholder="点击我选择职位" readonly=''/>
				<div class="main">
					<div class="search-content">
						<input type="text" name="searchWork" id="searchWork" placeholder="请输入职位"/>
						<ul class="search-work-list">
							<li>销售</li>
							<!--<li>客服</li>
							<li>物流/仓储</li>-->
						</ul>
					</div>
					<ul class="work-list">
						<li>销售</li>
						<li>客服</li>
						<li>物流/仓储</li>
						<li>人事/行政/后勤</li>
						<li>餐饮</li>
						<li>旅游</li>
						<li>酒店</li>
						<li>超市/百货/零售</li>
						<li>美容/美发</li>
						<li>保健按摩</li>
						<li>运动健身</li>
						<li>普工/技工</li>
						<li>生产管理/研发</li>
						<li>汽车制造/服务</li>
						<li>建筑</li>
						<li>物业管理</li>
						<li>房产中介</li>
						<li>家政保洁/安保</li>
						<li>司机/交通服务</li>
						<li>贸易/采购</li>
						<li>其他</li>
					</ul>
				</div>
			</form>
		</div>
		
	</body>
	<script type="text/javascript">
		$(function(){
			$('#work').click(function(){
				$('.main').toggle();
				//搜索显示
				$('#searchWork').bind('input propertychange', function() {
					$('.search-work-list').show();
					if($(this).val() == ''){
						$('.search-work-list').hide();
					}
				});
				//动态选择事件
				$(document).on('click','.main li',function(){
					$('.main').hide();
					$('#work').val($(this).html());
					$('#work').focus();
					$('#searchWork').val('');
				})
				//搜索焦点离开事件
				$('#searchWork').blur(function(){
					$('.search-work-list').slideUp('fast');
				})
			})
		})
		
	</script>
 
</html>

荒~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery简单的查找匹配职位（招聘网站）

html： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>searchWork</title> <script src="http://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> ...
复制链接

扫一扫