Layui 实现的可输入可下拉选择可筛选的控件

最新推荐文章于 2024-06-28 15:08:59 发布

sjk2lq

最新推荐文章于 2024-06-28 15:08:59 发布

阅读量2.8k

点赞数

分类专栏： Layui

本文链接：https://blog.csdn.net/sjk2lq/article/details/108596175

版权

Layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在实际项目中遇到使用下拉选择时能需要输入选项中不存在的值，软件中使用的是Layui的框架，其中不存在需求的控件，但是其下拉菜单控件有这类似的功能，只是存在不能保存输入值和修改时不能赋值的问题（因为选项中可能不存在这个值）。

又不想使用其他框架，就自己根据Layui下拉菜单控件写了个。

首先，HTML

<input id="inpProductNumber" name="inpProductNumber" placeholder="请选择.." type="text" lay-verify="required" autocomplete="off" class="layui-input text-item" value=""/>
<dl class="layui-anim layui-anim-upbit layui-hide">
<dd lay-value="" class="layui-select-tips">请选择..</dd>
<dd lay-value="GH100">GH100</dd>
<dd lay-value="GH200">GH200</dd>
<dd lay-value="GH300">GH300</dd>
</dl>

注意

1.input中添加了一个text-item的样式，是用来JS处理绑定元素用的。

2.dl必须在input之后

            $('.text-item').each(function () {
                var _this = $(this);
                var pdiv = _this.parent();

                var inpTitle = $('<div class=\"layui-select-title\"></div>');
                inpTitle.append(_this);
                inpTitle.append('<i class=\"layui-edge\"></i>');

                var inpDl = pdiv.find("dl");
                var inpText = $('<div class=\"layui-form-select  \"></div>')
                inpText.append(inpTitle);
                inpText.append(inpDl);
                inpDl.removeClass("layui-hide");

                inpDl.find("dd").click(function () {
                    var ddthis = $(this);
                    inpDl.find("dd").removeClass("layui-this");
                    ddthis.addClass("layui-this");
                    let val = ddthis.attr("lay-value");
                    _this.val(val);
                });

                inpTitle.click(function () {
                    $(".layui-form-selected").removeClass("layui-form-selected layui-form-selectup");
                    inpText.addClass("layui-form-selected");
                });

                pdiv.html(inpText);

                _this.keyup(function () {
                    inpDl.find("dd").removeClass("layui-this");
                    inpDl.find("dd").each(function () {
                        var dthis = $(this);
                        let inpVal = _this.val().toUpperCase();
                        let val = dthis.attr("lay-value").toUpperCase();
                        if (val.indexOf(inpVal) != -1) {
                            dthis.show();
                        } else {
                            dthis.hide();
                        }
                    });
                });

            });

使用了Layui内置的Jq处理