jq实现自定义搜索输入框

最新推荐文章于 2022-01-19 23:26:38 发布

低_调_哥

最新推荐文章于 2022-01-19 23:26:38 发布

阅读量459

点赞数

分类专栏： js 前端

本文链接：https://blog.csdn.net/caiyongshengCSDN/article/details/79103136

版权

前端同时被 2 个专栏收录

76 篇文章 1 订阅

订阅专栏

54 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            background-color: transparent;
            -webkit-text-decoration-skip: objects;
            text-decoration: none;
            outline: none;
            color: #666;
        }
        input, textarea:focus {
            outline: none;
        }
        .cus-search-bar {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            margin: 0 auto;
        }
        .cus-search-bar>input {
            width: 300px;
            height: 32px;
            line-height: 32px;
            vertical-align: middle;
            padding: 0 5px;
            border-radius: 4px;
            border: 1px solid #cad6e1;
            color: #666;
        }
        .s-drop-menu {
            position: absolute;
            top: 35px;
            left: 0;
            right: 0;
            z-index: 9;
            text-align: left;
            border-radius: 8px;
            padding: 10px 0 0;
            border: 1px solid #DEE1E2;
            overflow: hidden;
            box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
            background-color: #fff;
            background-color: rgba(255,255,255,0.95);
            display: none;
        }
        .s-drop-menu>.option {
            display: block;
            line-height: 30px;
            padding: 0 20px 0 50px;
            color: #000;
        }
        .s-drop-menu>.option:hover {
            text-decoration: none;
            background-color: #0fa4f6;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="cus-search-bar">
    <input id="searchInput" type="text" placeholder="搜索您想要查询的项目" />
    <div class="s-drop-menu">
        <a href="javascript:;" class="option">琶洲站</a>
        <a href="javascript:;" class="option">琶洲站供电系统</a>
        <a href="javascript:;" class="option">琶洲站供电系统</a>
        <a href="javascript:;" class="option">琶洲站供电系统</a>
        <a href="javascript:;" class="option">琶洲站供电系统</a>
        <a href="javascript:;" class="option">琶洲站供电系统</a>
        <a href="javascript:;" class="option">琶洲站概要设计批复</a>
        <a href="javascript:;" class="option">琶洲站供电系统</a>
    </div>
</div>

<script src="../../resources/plugins/jquery/jquery-1.9.1.min.js"></script>

<script>
    $(function () {
        //输入框
        $('#searchInput').focus(function () {   //聚焦展开
            $(this).next().slideDown();
        });
        $('#searchInput').blur(function () {    //失去焦点收起
            $(this).next().slideUp();
        });
        $('.s-drop-menu .option').click(function () {
            var value = $(this).text();   //获取下拉框内的值
            $('#searchInput').attr('value',value)
        })
    })
</script>

</body>
</html>

附图：

低_调_哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq实现自定义搜索输入框

html>lang="en"> charset="UTF-8"> Title a { background-color: transparent; -webkit-text-decoration-skip: objects; text-decoration: none;
复制链接

扫一扫