input框中如何添加搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="Font/demo-files/demo.css"/>
    <style>
        /*1.此处应我的项目需要，加了些特别的设置，如字体、背景色等，按需添加；
            2.内层input不加边框，看起来效果会自然一点，所以外层div设置了边框和圆角*/
        .box{
            margin: 50px auto;
            background-color: #ffffff;
            border: 1px solid #eeeeee;
            border-radius: 6px;
            font-size: 0.52rem;
            text-align: center;
            color: #d2d2d2;
        }
        /*label标签样式 放在.box下，不至于影响其他的label
              采取绝对定位，位置根据需求确定*/
        .box label{
            z-index: 2;
            position: absolute;
            left: 15%;
            margin-left: -8%;
            color: #B2B2B2;
            top: 4.8rem;
            font-weight: normal;
        }
        /**
          *input标签样式
          *宽度适应外层div
          *隐藏边框
          *这里有个小技巧，height与line-height值相等，可保证文字垂直居中；但我发现文字比图标略偏下，进行了微调；
        */
        .box input{
            text-indent: 10px;
            height: 2.04rem;
            line-height: 2.04rem;
             100%;
            border: none;
            outline: none;
        }
        /**
          *图标样式
          *绝对定位，自定义颜色
        */
        .box i{
            position: absolute;
            top: 4.8rem;
            left: 5%;
            /*margin-left: -15%;*/
            color: #B2B2B2;
        }

    </style>
//具体样式自行按照情况调节
</head>
<body>
     
    <div class="box">
        <label for="q" id="q_label">请输入关键字</label>
        <input id="q"  type="text">
        <i class="icon icon-search" id="q_i"></i>
    </div>
     
     <script src="js/libs/jquery.3.1.1.js"></script>
    <script>
        // js判断input输入框中是否有值，以此来判断是否隐藏默认提示信息
        //使用keyup事件
        $(function() {
            $('#q').on('keyup',function() {
                var len = document.getElementById('q').value; 
                if(len == ''){
                    $('#q_label').show();
                    $('#q_i').show();
                }else{
                    $('#q_label').hide();
                    $('#q_i').hide();
                }
            });
        })
    </script>
</body>
</html>
再做项目的时候经常遇到的问题，以前只是做静态页面，现在要加效果了，所以百度了一下，觉得特别有帮助到我。所以跟你们分享一下