input 模糊搜索下拉框

最新推荐文章于 2024-06-13 17:25:04 发布

weixin_34392435

最新推荐文章于 2024-06-13 17:25:04 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lxnv587/p/10412627.html

本文介绍了一个基于HTML、CSS和JavaScript实现的定时任务表达式选择器，该选择器允许用户从预设的时间表达式中选择，以设定不同频率的定时任务。包括每秒、分钟、小时、天等周期性的执行选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<input type="text" class="layui-input blockInput" id="taskExpression" name="taskExpression" value="${timeTask.taskExpression }" lay-verify="required" onclick="openSelect(this)"  onkeyup="ulHtml()"/>
								<div id="expressionDiv" class="expression" style="width: 535px;height:200px;display:none;border: 1px rgb(210, 210, 210) solid;">
									<ul id="expression"  >
									</ul>
								</div>

　　css

<style type="text/css">
		#expressionDiv ul li{
			cursor:pointer;
			line-height:23px;
			background:#fff;
			margin: 10px;	
		}
		.expression {
		    position: absolute;
		    top: 44px;
		    z-index: 999;
		    overflow-y: auto;
 		    overflow-x: hidden;
 		    background:#fff
		}
		#expressionDiv ul li:hover{
			background-color:#f5f5f5;
		} 
	</style>

$(function(){

        ulHtml();
	$(document).click(function(e) { // 在页面任意位置点击而触发此事件
		
		
		var v_id = $(e.target).attr('id'); 
		
		var id = $(e.target).parent().parent().attr('id');
		
		
		if("expressionDiv" != v_id  && "expressionDiv" != id ){
			$("#expressionDiv").css("display","none");
		}
		if(v_id == "taskExpression"){
			$("#expressionDiv").css("display","block");
		}
	})

});



function ulHtml(stata){
	
	
	$("#expression").empty();
	var expression=['*/3 * * * * ?(每3秒钟执行一次)',
	                '*/5 * * * * ?(每5秒钟执行一次)',
	                '*/10 * * * * ?(每10秒钟执行一次)',
	                '*/15 * * * * ?(每15秒钟执行一次)',
	                '*/20 * * * * ?(每20秒钟执行一次)',
	                '*/30 * * * * ?(每30秒钟执行一次)',
	                '*/40 * * * * ?(每40秒钟执行一次)',
	                '*/50 * * * * ?(每50秒钟执行一次)',
	                '0 */1 * * * ?(每1分钟执行一次)',
	                '0 */5 * * * ?(每5分钟执行一次)',
	                '0 */10 * * * ?(每10分钟执行一次)',
	                '0 */15 * * * ?(每15分钟执行一次)',
	                '0 */30 * * * ?(每30分钟执行一次)',
	                '0 */40 * * * ?(每40分钟执行一次)',
	                '0 */50 * * * ?(每50分钟执行一次)',
	                '0 0 */1 * * ?(每1小时执行一次)',
	                '0 0 */2 * * ?(每2小时执行一次)',
	                '0 0 */5 * * ?(每5小时执行一次)',
	                '0 0 */10 * * ?(每10小时执行一次)',
	                '0 0 */12 * * ?(每12小时执行一次)',
	                '0 0 1 * * ?(每天凌晨1点执行)',
	                '0 0 2 * * ?(每天凌晨2点执行)',
	                '0 0 3 * * ?(每天凌晨3点执行)',
	                '0 0 4 * * ?(每天凌晨4点执行)',
	                '0 0 5 * * ?(每天早上5点执行)',
	                '0 0 6 * * ?(每天早上6点执行)',
	                '0 0 12 * * ?(每天中午12点执行)',
	                '10 */1 * * * ?(任务启动后，10秒开始执行任务)',
	                '20 */1 * * * ?(任务启动后，20秒开始执行任务)',
	                '30 */1 * * * ?(任务启动后，30秒开始执行任务)'
	                ];
	                
	
	var taskExpression = $("#taskExpression").val();
	
	html=""
	for ( var i = 0; i < expression.length; i++) {
		
		if(taskExpression == "" || stata == '0'){
			html += '<li onclick="selectValue(this)">'+expression[i]+'</li>';
		}
		
		
		if(taskExpression != ""&&expression[i].indexOf(taskExpression)!=-1){
			html += '<li onclick="selectValue(this)">'+expression[i]+'</li>';
		}
		
	}
	$("#expression").html(html);
	
}

function hideExpressionDiv(){
	
	if('block' == $("#expressionDiv").css("display")){
		$("#expressionDiv").css("display","none");
	}else{
		$("#expressionDiv").css("display","block");
	}
	
	
	
}



function openSelect(_this){
	ulHtml('0');
	hideExpressionDiv();
}

function selectValue(_this){
	$("#taskExpression").val($(_this).text().split("(")[0]);
	$(_this).parent().parent().slideToggle(300);
}

转载于:https://www.cnblogs.com/lxnv587/p/10412627.html