input和ul代替的模糊查询下拉框

Html

Css

ul,li {
	margin:0;
	padding:0;
}
#main {
	width:200px;
	height:400px;
	border:1px solid #ccc;
}
#search_content {
	max-height:200px;
	overflow-y:scroll;
}
#search_list .li-hover {
	color:#fff;
	background-color:#1e90ff;
}
#search_list .li-list {
	cursor:pointer;
}

$(document).ready(function(){
view = {
	searchInput: function(wrapper,dataArr){
		wrapper = (wrapper instanceof jQuery) ? wrapper : $(wrapper);
		wrapper.append("<input type='text' name='input' id='input_box' value='' placeholder='请输入或选择内容' /><div id='search_content'><ul id='search_list'></ul></div>");
		$("#search_content").hide();
		var options = "";
		var tempArr = [];
		for(var i in dataArr){
			options += "<li class='li-list'>"+dataArr[i]+"</li>";
			tempArr[i] = dataArr[i];
		}
		console.log(tempArr);
		$("#search_list").html("").append(options);
		
		function searchInput(tempArr){
			var listArr = [];
			var text = $("#input_box").val();
			for(var key in tempArr){
				if(tempArr[key].indexOf(text) > -1){
					listArr.push(tempArr[key]);
				}	
			}
			console.log(listArr);
			var options = "";
			for(var i in listArr){
				options += "<li class='li-list'>"+listArr[i]+"</li>";
			}
			if(options == ''){
				$("#search_content").hide();
			}else{
				$("#search_content").show();
				$("#search_list").html("").append(options);
			}
		}
		
		$("#input_box").on("focus",function(){
			$("#search_content").show();
			searchInput(tempArr);
		});
		$("#input_box").on("keyup",function(){
			searchInput(tempArr);
		});
		
		$("#search_content").on("mouseover",function(){
			$(this).addClass("ul-hover");
		});
		$("#search_content").on("mouseout",function(){
			$(this).removeClass("ul-hover");
		});
		$("#input_box").on("blur",function(){
			if($("#search_content").hasClass("ul-hover")){
				$("#search_content").show();
			}else{
				$("#search_content").hide();
			}
		});
		
		$("#search_list").delegate(".li-list", "click",function(){
			$("#search_list .li-list").removeClass("li-hover");
			var selectText = $(this).html();
			console.log(selectText);
			$("#input_box").val(selectText);
			$("#search_content").hide();
		});
		$("#search_list").delegate(".li-list", "mouseover",function(){
			$("#search_list .li-list").removeClass("li-hover");
			$(this).addClass("li-hover");
		});
	}
}; 
var arr1 = ["北京","上海","广州","苏州","南京","天津","沈阳","兰州","太原","重庆","南昌","长沙","武汉","济南","福州","成都","桂阳","桂林"];
view.searchInput($("#main")[0],arr1);

});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.1

立即下载

input和ul代替的模糊查询下拉框



代码描述：input和ul代替的模糊查询下拉框

input代替select下拉框，并可实现模糊查询

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

贺

相关代码

input和ul代替的模糊查询下拉框

最新