layui 框架区别于那些基于 MVVM 底层的 UI 框架, 更多是为服务端程序员量身定做, 你无需涉足各种前端工具的复杂配置, 只需面对浏览器本身. 本篇文章给大家介绍一下实现 input 输入和选择的方法.
Layui 实现 input 输入和选择的方法:
html 代码:
- <div class="layui-col-md4">
- <label class="layui-form-label"> 移交单位 < span style="color:red">*</span></label>
- <div class="layui-input-block">
- <input type="text" name="HandoverCompany" id="HandoverCompany" class="layui-input"
- style="position:absolute;z-index:2;width:80%;" lay-verify="required" value="111"
- onkeyup="search()" autocomplete="off">
- <select type="text" id="hc_select" lay-filter="hc_select" autocomplete="off"
- placeholder="移交单位全称" lay-verify="required" class="layui-select" lay-search>
- <option value="111">111</option>
- <option value="222">222</option>
- <option value="333">333</option>
- <option value="444">444</option>
- <option value="555">555</option>
- </select>
- </div>
- </div>
其中 input 的几个 style 样式简单说一下.
position:absolute 在这里是让 input 和 select 在同一位置.
z-index:2 是为了让 input 在 select 上面.
width:80% 是为了不盖住 select 后面的小三角符号, select 还可以点击.
autocomplete="off" 为了不自动填充 input 框, 免得压盖 select 选项
然后是 JS 代码.
- layui.use(['form', 'layedit','upload'], function () {
- var form = layui.form
- form.on('select(hc_select)', function (data) { // 选择移交单位 赋值给 input 框
- $("#HandoverCompany").val(data.value);
- $("#hc_select").next().find("dl").CSS({ "display": "none" });
- form.render();
- });
- Windows.search = function () {
- var value = $("#HandoverCompany").val();
- $("#hc_select").val(value);
- form.render();
- $("#hc_select").next().find("dl").CSS({ "display": "block" });
- var dl = $("#hc_select").next().find("dl").children();
- var j = -1;
- for (var i = 0; i < dl.length; i++) {
- if (dl[i].innerHTML.indexOf(value) <= -1) {
- dl[i].style.display = "none";
- j++;
- }
- if (j == dl.length-1) {
- $("#hc_select").next().find("dl").CSS(
- { "display": "none" }
- );
- }
- }
- }
- });
简单说一下我的思路, 首先 select 选择的值要能赋值给 input 框, 可以就需要 form.on('select(hc_select)'来监听 select 值的变化, 选择了之后要把下拉列表给隐藏掉. 同时重新渲染一下这个表单, 只重新渲染当前的 select 也是可以的.
然后就是输入到 input 框里的文字如何去 select 中去搜索. 首先我们通过检查 select 的 dom 结构可以发现, 他里面的选项都是在 dl 下的 dd 标签中, 如图.
然后我们获取到 dl 标签, 然后通过循环的方式挨个去匹配 dd 中的选项与我们输入的文本是否存在关系. 通过 indexOf 就行. 如果不相似, 则直接隐藏掉, 然后这里为什么要定义一个 j 呢?
是因为如果都不匹配的话, 下面还是会出来一个空的 dl 标签, 页面显示就是一个空的小列表, 有点影响美观, 所以如果你输入的文本和下拉列表中的选项都没关系的话, 直接把 dl 给隐藏了. 这里我是判断不相似的个数如果和 dl.length 相等的话, 就说明你输入的文本和 select 的选项没一个相似的, 然后就可以把 dl 隐藏了.
本文转载自: https://www.cnblogs.com/qffxj/p/11314027.html
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/framework/layui/17376.html