二级菜单带模糊查询的输入框
前端初级菜鸟,刚刚找到个输入框插件,带模糊匹配数据,并且可以有二级菜单,我就试了下。
效果图
用了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数据大概是这个样子的