二级菜单带模糊查询的输入框

匿名 (未验证) 提交于 2019-12-02 23:32:01

前端初级菜鸟,刚刚找到个输入框插件,带模糊匹配数据,并且可以有二级菜单,我就试了下。

效果图


用了jQuery自定义下拉框插件select-mania,插件地址:http://www.jq22.com/jquery-info20485
页面引入的js和css

html页面部分内容:

<body> 	<select class="demo-5"> 	</select> </body> 

js代码:

$(function() { 	//后台传递过来的json数据 	var data = JSON.parse($(".processData").val()); 	 	for ( var key in data) {//循环数据显示出来 		$("<optgroup class='opt"+key+"' label='"+key+"'></optgroup>").appendTo($(".demo-5"));  		for(var i in data[key]){ 			var op = data[key][i]; 			$("<option>"+op+"</option>").appendTo($(".opt"+key));  		} 	} 	$('.demo-5').selectMania({ 		    size: 'small',  		    themes: ['square','blue'],  		    placeholder: '请选择', 			removable: true, 			search: true, 			empty:true 		}); 	//去掉自带的图标 	$(".select-mania-arrow").css("display","none"); 	$(".select-mania-clear").css("display","none"); 	$(".select-mania-inner").css("padding-left","0"); }) 

json数据大概是这个样子的

文章来源: https://blog.csdn.net/weixin_44285195/article/details/90241582
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!