首页 前端知识 jQuery借鉴layui实现可搜索下拉列表(有值才显示筛选出的列表)

jQuery借鉴layui实现可搜索下拉列表(有值才显示筛选出的列表)

2024-06-06 00:06:31 前端知识 前端哥 911 4 我要收藏

需求:表单中的下拉列表不能直接显示所有的选项,只有通过输入要筛选的值,才能显示匹配的选项。也就是不能让用户看到所有的选项。

因为使用的是jQuery和layui,用layui的lay-search会显示所有选项,所以最后决定自己写。

1、首先是body中的内容,使用layui的表单中的输入框和下拉列表

<div class="layui-form-item">
    <label class="layui-form-label">下拉框</label>
    <div class="layui-input-block">
        <input type="text" name="select_text" id='select_text'  placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
        <div class="layui-unselect layui-form-select">
            <dl class="layui-anim layui-anim-upbit" id="inputSelect" style="top: 0px;">
                <dd mark="tips" name="dd" id="tips" onclick="ddClick(this)" class="layui-select-tips">
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10922.html
标签
layui
评论
发布的文章

基于Vue2的ofd文件预览

2024-06-10 11:06:28

网页快速置灰效果

2024-06-10 11:06:17

HTML5 CSS——Day6

2024-06-10 11:06:11

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!