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