网页内容搜索_网页搜索一段值-CSDN博客

本文链接：https://blog.csdn.net/djc341118/article/details/124849440
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>search</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .boxone {
            width: 400px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div class="boxone">
        <p>
            <input type="text" name="" value="小搜一下" id="inputone" />
            <button id="btnone"><image src="搜索.png" style="width:12px;height:12px;border-radius: 1px;"></image></button>
        </p>
        <ul id="conter"></ul>
    </div>
    <script type="text/javascript">
        window.onload = function() {
            //定义可搜索内容
            var inputList = ["DOM", "javascript", "CSS+HTML进阶", "HTML", "CSS"];
            //获取ul与input，button
            var btnone = document.getElementById("btnone")
            var conter = document.getElementById("conter");
            var input = document.getElementById("inputone")
            input.onfocus = function() {
                if (this.value === '小搜一下') {
                    this.value = ''
                }
                this.style.color = '#333'
            }
            input.onblur = function() {
                    if (this.value === '') {
                        this.value = '小搜一下'
                        conter.innerHTML = ''
                    }
                    this.style.color = '#999'
                }
                //注册点击事件
            btnone.onclick = function() {
                //获取input框的value值
                var inputonevalue = document.getElementById("inputone").value;
                //定义新数组，保存符合搜索内容要求的数据
                var a = [];
                var b = 0;
                var c = '小主 我无能为力'
                    //循环判断符合要求的数 
                for (var j = 0; j < inputList.length; j++) {
                    //搜索数组元素的索引值，当索引值为-1则表明不含有这个元素
                    if (inputList[j].indexOf(inputonevalue) != -1) {
                        a[b++] = inputList[j];
                        c = ''
                    } else {
                        conter.innerHTML = c
                        conter.style.fontSize = '10px'
                    }
                }
                //循环将数据输出显示到ul下
                for (var i = 0; i < a.length; i++) {
                    //创建li
                    let lione = document.createElement("li");
                    //定义li里的内容
                    lione.innerHTML = a[i];
                    //将li添加到ul里
                    conter.appendChild(lione);
                }
            };

        }
    </script>
</body>

</html>