input 模糊搜索下拉框

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>

　　js

$(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);
}