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