记录Layui-select中的搜索下拉框lay-search相关的使⽤（对于
初次使⽤是真的难顶）
对于⼀个后端开发⼈员来说，常⽤的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>
layui和bootstrap哪个好</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].place(/<\/?.+?>/g,"").replace(/ /g,"");
datas += "<option value='"+text+"'>" + text +"</option>";
}
$('#TemplateOptions').append(datas);
},
error: function(error) {
$.modal.alertWarning("获取模版数据失败");
}
});
});
在layui这个js模块初始化的时候顺便获取了下数据这⾥就是调⽤重新渲染，括号⾥⾯写select就是只重新渲染了当前页⾯的所有select，如果什么都不写就是默认全页⾯重新渲染
最后，我希望在我选择以后，这个数据要放在其他的地⽅，或者弹出来等，然后我就很耿直的去和以前纯js开发那样，直接给option⾥⾯去拼接了onchange事件，这样的话，选择完不就可以直接拿值了吗?
嘿嘿......怎么可能满⾜你.事实是，拼接了onchange事件以后，并没有啥卵⽤，不会其任何作⽤，你打开他的页⾯结构你会发现
这⿁地⽅哪来的所谓的option所以你绑定的东西.并没有啥卵⽤，那怎么办呢?
layUI,bootstrap等UI框架都需要做的⼀件事，就是事件监听.你需要⾃⼰去初始化⼀个监听事件，这⾥我并没有了解过为什么这样，听前端朋友说这样写会好⼀点，安全⼀点
<('select(selectTemplate)',function(data){
console.info(data.value);
})
在刚刚的ajax获取数据的代码下⾯,layui初始化⽅法的⾥⾯，我加上了这么⼀⾏，这样以后，你就可以在你下拉框中的数据确定变动以后，获取到这⾥的数据.
这次的记录就这些，希望以后有⼈使⽤这个东西，能花费很少的时间完⼯

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。