csdn下拉搜索框_想要写一个csdn的搜索-优快云博客

本文链接：https://blog.youkuaiyun.com/zhourongxiang1/article/details/145770381

我仿造着做了一个相同的下拉搜索框。

注意点：当搜索abc的时候。因为搜索结果为空，所以它会清空输入框内容，并且下拉框显示全部编程语言。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉搜索框示例</title>
    <style>
        ul {
            border: 1px solid black;
            width: 125px;
            list-style-type: none;
        }
    </style>
</head>

<body>
    <input type="text" id="search-input" placeholder="输入搜索内容..." oninput="updateUl">

    <ul id="languages">
        <li>c</li>
        <li>javascript</li>
        <li>vbscript</li>
    </ul>
    <script src="jquery-3.6.4.min.js"></script>

    <script>
        var languages = ['c', 'javascript', 'vbscript'];
        var input = document.getElementById('search-input');
        //ul
        var ul = document.getElementById('languages');
        input.addEventListener('input', function(event) {
            // 在这里执行你需要的操作
            updateUl(event.target.value);
        });

        function updateUl(value) {
            //过滤数组中符合搜索条件cri的元素：元素包含cri字符串则留下
            var results = [];
            for (let i = 0; i < languages.length; i++) {
                // 遍历数组，对每个元素进行操作
                console.log(languages[i]);
                if (languages[i].indexOf(value) != -1) {
                    results.push(languages[i]);
                }
            }


            //清空上一次搜索得到的li
            ul.innerHTML = "";
            if (results.length == 0) {
                //如果搜索到的结果集为空（result为空），则清除input
                $('#search-input').val("");
                // //显示全部
                for (let i = 0; i < languages.length; i++) {
                    $('#languages').append("<li>" + languages[i] + "</li>");
                }
            } else {
                //往ul中填充多个li
                for (let i = 0; i < results.length; i++) {
                    $('#languages').append("<li>" + results[i] + "</li>");
                }
            }

        }
    </script>
</body>

</html>