浅谈Layui如何实现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();
            });

            window.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标签中,如图。

1.png

  • 然后我们获取到dl标签,然后通过循环的方式挨个去匹配dd中的选项与我们输入的文本是否存在关系。通过indexOf就行。如果不相似,则直接隐藏掉,然后这里为什么要定义一个j呢?

    是因为如果都不匹配的话,下面还是会出来一个空的dl标签,页面显示就是一个空的小列表,有点影响美观,所以如果你输入的文本和下拉列表中的选项都没关系的话,直接把dl给隐藏了。这里我是判断不相似的个数如果和dl.length 相等的话,就说明你输入的文本和select的选项没一个相似的,然后就可以把dl隐藏了。

本文转载自:https://www.cnblogs.com/qffxj/p/11314027.html


推荐文章
layui的模块是什么意思?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

layui是啥框架?

layui首个版本发布于2016年金秋,她区别于那些基于MVVM底层的UI框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面

layui登录后token问题详解

layui是一个非常简单且实用的后台管理系统搭建框架,里面的插件丰富使用简单,只需要在原有基础上进行修改即可,但是在数据处理方面略显薄弱,内置的jquery在实际过程中略显不足,若是能添加内置的mvc

Django+Layui学习之浅谈后台布局

前言Layui对于没有太多前端基础的我来说,第一次接触还是有点困难,不过文档还算详细,摸索着的逐渐的了解了,这次来说下后台布局。Layui后台布局:一、后台布局之顶边栏 layui后台布局 控制台

浅谈让 layui table 固定列也能监听滚动的方法

目前table能滚动的区域是layMain这个区域,他会联动的去滚动表头和固定列,左右固定列实际他们本身的样式overflow是hidden的,所以本身不会出现滚动条,也就是说你把鼠标移动到左右固定列

laypage组件常见用法总结

laypage的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。核心方法:laypage.render(options)来设置基础参数。一、laypage的常用基

浅谈layui中table.render的使用(附代码)

layui框架提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,其中包括:layer、layDate、layPage、laytpl、table等。本篇文章给大家浅谈一下layui中table.r

浅谈layui标签输入框inputTags

layui标签输入框inputTags样式:目录结构:页面代码: inputTags layui.config({ base:'js/

Layui的简易入门教程

获得layui后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:./layui/css/layui.css ./layui/layui.js //提示:如果是采用非模块化

layui时间控件清空之后无法正常使用怎么办?

解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择。共有两种解决方式:方式一(layui1.x):html代码: js代码:varstart={ istime:tru

layui如何获取table某一行的值?

layui中可以使用table.checkStatus('ID')方法获取table某一行的值,其中ID为基础参数。【自动化渲染】……【方法渲染】table.render({//其它参数省略 id:'

怎么将layui引入开发框架中?

将layui导入开发框架的方法:1、下载框架包(http://www.layui.com/)2、将layui文件夹拷入项目位置3、页面中导入layui.all.jslayui.css和jquery即可

layui和easyui的区别是什么?

layuilayui是一款采用自身模块规范编写的前端UI框架,它遵循原生的HTML/CSS/JS书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到API都非常适合界面的快速开发。事实

layui弹窗如何禁止拉伸?

弹层组件文档-layui.layerayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务

layui如何清除表单数据?

layui清空表单数据的方法:1、调用reset()方法清空functionfomrReset() { document.getElementById("myform").reset(); }2、使用

layui之关于表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

浅谈layui数据表格的基础使用

表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstraptable、layuitable、ea

怎么修改layui提示样式?

一直以来都认为layui挺好看的,包括它的弹层组件layer,不过今天恰好碰到了layui表单验证弹框的位置和样式不能调整的问题;它的默认样式是这样的:因为我页面布局的关系,弹框挡住了按钮,所以我决定

layui的优缺点是什么?

layui是一款采用自身模块规范编写的前端UI框架,它遵循原生的HTML/CSS/JS书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到API都非常适合界面的快速开发。事实上layu