Mikel
来源： 记录Layui-select中的搜索下拉框lay-search相关的使用(对于初次使用是真的难顶)-CSDN博客
对于一个后端开发人员来说,常用的easyUI,miniUI,bootstrap,layUI等前端整合式的UI框架能很好的提高页面美观程度以及开发效率
我个人在开发中,使用过miniUI,bootstrap,layUI,其中miniUI是在公司开发时公司要求学习使用的,个人写东西还是偏重于layUI和bootstrap,毕竟看着漂亮点.
本次记录的内容是lay-search这个属性在使用时的问题(可能我能力不够,卡了我两个多小时),因为浪费了过多时间,所以记录一下,在我之前有很多类似的文章,但是都很零碎,没有一个比较全的(搜索水平有限)
首先,lay-search这个属性的作用是:将一个<select>标签初始化为可以输入和选择内容,你输入的文字可以自动匹配,类似百度的搜索.
下面首先贴代码:
<form class=”layui-form”>
<div class=”layui-form-item”>
<div class=”layui-inline col-sm-12″>
<select id=”TemplateOptions” name=”effectsType” class=”layui-select” lay-verify=”required” lay-filter=”selectTemplate” lay-search>
<option value=””>实体要素内容选择</option>
</select>
</div>
</div>
</form>
这里,有个问题就出来,很多人写了select标签,也写了lay-search,但是就是不能选择输入,什么原因?
这里就是第一个问题,select中的lay-search这个属性,必须在layui-form标签中才可以生效
如果说没有layui-form包裹,那么你的select仅仅只是一个正常的<select>下拉选择
然后我们option里面的内容,我选择的方式是页面加载就进行查询渲染,不和数据库做实时交互,毕竟数据量不大
我的思路是页面加载–>初始化Layui–>调用Ajax方法请求数据–>在success方法中组装option标签参数–>使用JQuery进行渲染
是不是上面这个方法看着没啥毛病?对啊,确实是没毛病啊,然后我就卡在这里了,<select>标签里面永远没有我的数据,不管我是用id渲染还是用name获取元素去渲染,都没有数据,不管我用append还是add都一样,最后在layui的文档中发现了,让你给这个lay-search以后重新给了数据以后,需要调用layui.form这个对象进行一次调用,进行重新渲染.否则不会生效.
所以我就这样写了:
layui.use([‘element’,’form’], function(){
var $ = layui.JQuery
,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
var form = layui.form;
$.ajax({
type: “POST”,
url: prefix + “/*****”,
data: null,
dataType: ‘json’,
success: function(result) {
var datas = “”;
var data = result.data;
for(var i = 0;i<data.length;i++){
var text = data[i].rtContent.replace(/<\/?.+?>/g,””).replace(/ /g,””);
datas += “<option value='”+text+”‘>” + text +”</option>”;
}
$(‘#TemplateOptions’).append(datas);
form.render(‘select’);
},
error: function(error) {
$.modal.alertWarning(“获取模版数据失败”);
}
});
});
在layui这个js模块初始化的时候顺便获取了下数据这里就是调用重新渲染,括号里面写select就是只重新渲染了当前页面的所有select,如果什么都不写就是默认全页面重新渲染
最后,我希望在我选择以后,这个数据要放在其他的地方,或者弹出来等,然后我就很耿直的去和以前纯js开发那样,直接给option里面去拼接了onchange事件,这样的话,选择完不就可以直接拿值了吗?
嘿嘿……怎么可能满足你.事实是,拼接了onchange事件以后,并没有啥卵用,不会其任何作用,你打开他的页面结构你会发现这鬼地方哪来的所谓的option????所以你绑定的东西.并没有啥卵用,那怎么办呢?
layUI,bootstrap等UI框架都需要做的一件事,就是事件监听.你需要自己去初始化一个监听事件,这里我并没有了解过为什么这样,听前端朋友说这样写会好一点,安全一点
form.on(‘select(selectTemplate)’,function(data){
console.info(data.value);
})
在刚刚的ajax获取数据的代码下面,layui初始化方法的里面,我加上了这么一行,这样以后,你就可以在你下拉框中的数据确定变动以后,获取到这里的数据.
这次的记录就这些,希望以后有人使用这个东西,能花费很少的时间完工
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/Zachariahs/article/details/99823417
