php layui实现添加input,Layui实现input输入和选择的方法

Layui实现input输入和选择的方法：

HTML代码：

移交单位*

111

222

333

444

555

其中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标签中，如图。

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

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

更多layui知识请关注PHP中文网的layui使用教程栏目。

php layui实现添加input,Layui实现input输入和选择的方法相关推荐

layui js添加html,layui.js如何声明全局变量？
layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API ...
html输入框只能输入文字,input文本框强制输入指定文字的方法以及IE11的兼容
背景:最近开发的韩国项目,在用户姓名输入框一栏中,要求只能输入韩文,通常用到onkeyup和onafterpaste两个事件来触发方法,并在方法中进行校验,但是在IE浏览器中,出现了一种情况,就是韩文 ...
layui动态添加的表单元素显示异常
这种问题发生的原因:layui会对表单内的元素进行二次渲染,动态添加的代码没有经过再次渲染,所以显示异常. 官方文档其实也有提及这个问题和解决方法 https://www.layui.com/doc/ ...
java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例
本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖主要是jquery-1.11. ...
layui穿梭框和layui表格数据交互
<style>/*树形菜单--分割线内文字*/.diseasea{position: relative;left:180px; /*右*/color: #005cbf}/*表单信息--分割 ...
多组input文件，每组 multiple选择多张图片上传可增删其中任意一张图片，用formData对象实现（ajax，sync: false同步）
input .multiple选择多张图片时,需要删除其中的一张图片怎么做,大家都知道 input 中的文件是不能删除和更改的,只能清空,这里我的做法是定义一个对象储存器把需要的文件存在储存器中 f ...
input验证码框，输入非数字或非12位时，红框提示;每4位加一个空格
以下代码:input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格 //input验证码框,输入非数字或非12位时,红框提示;每3位加一个空格$(".text").f ...
多组input文件，每组 multiple选择多张图片上传可增删其中任意一张图片，用formData对象实现；（ajax做异步，自己做延时同步）
input .multiple选择多张图片时,需要删除其中的一张图片怎么做,大家都知道 input 中的文件是不能删除和更改的,只能清空,这里我的做法是定义一个对象储存器把需要的文件存在储存器中 f ...
微信小程序input组件边框不显示问题的解决方法
问题情景在微信小程序开发中经常用到input组件,但是如果按下面的wxml代码去写,input的边框是不会显示的,只有在鼠标点过去的时候才会有个光标 <view class="set ...

php layui实现添加input,Layui实现input输入和选择的方法

php layui实现添加input,Layui实现input输入和选择的方法相关推荐

最新文章

热门文章