当搜索框失去焦点时，显示输入字眼的相关产品(需引入lauyi包)

CSS样式

 <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .contant {

            width: 500px;

            height: 500px;

            margin: 100px auto;

            position: relative;

        }

        .layui-input {

            width: 400px;

        }

 .layui-btn {

            display: inline-block;

            position: absolute;

            left: 405px;

            top: 0;

        }

        #show {

            width: 400px;

            height: 400px;

            border: 1px solid #ccc;

            border-radius: 5px;

            border-top: none;

            display: none;

            color: #666;

        }  

        #show p {

            margin: 10px 0;

            margin-left: 5px;

        }

    </style>

html代码

 <div class="contant">

        <input type="text" id="input" required placeholder="请输入商品" class="layui-input">

        <button type="button" id="btn" class="layui-btn"><i class="layui-icon  layui-icon-search"></i> </button>

        <div id="show"></div>

    </div>

JavaScript

<script src="./layui/layui.js"></script>

    <script>

        let arr = ['兰蔻（LANCOME）肌底精华眼霜15ml  ',

            '兰蔻（LANCOME）小黑瓶眼部肌底精华液20ml',

            '兰蔻（LANCOME）持妆轻透粉底液PO-01 30ml',

            '兰蔻（LANCOME）奇迹香氛 30ml+兰蔻菁纯丝绒雾面唇膏',

            '兰蔻（LANCOME）小黑瓶全新肌底精华液50ml',

            '兰蔻（LANCOME）限定皮革唇膏 888 3.4g'

        ]

        // 获取文本框和展示区域

        let input = document.getElementById('input')

        let show = document.getElementById('show')

        //给文本框注册键盘抬起事件

        input.onkeyup = function() {

                show.style.display = 'block'

                let str = ''

                    // 获取文本框的值

                let val = input.value

                arr.forEach(r => {

                    //  r 是字符串，则用到indexOf进行匹配，只要匹配到了返回所在字符串的下标，匹配不到则返回-1

                    let num = r.indexOf(val)

                    if (num != -1) {

                        str += '<p>' + r + '</p>'

                    }

                    if (val === '' || str === '') {

                        show.innerHTML = '<p>' + '暂无结果' + '</p>'

                    } else {

                        show.innerHTML = str

                    }

                })

            }

            //给文本框注册失去焦点事件

        input.onblur = function() {

            show.style.display = 'none'

        }

    </script>