first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/陈一航/2020-04-02/search.html
+++ b/历届学生/陈一航/2020-04-02/search.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>仿照百度搜索提示建议</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+        .main {
+            width: 400px;
+            margin: 30px auto;
+        }
+        .none {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="main">
+        <input class="search_key" type="text" placeholder="输入关键字">
+        <ul class="search_list none">
+        </ul>
+    </div>
+</body>
+<script>
+    // 获取输入框input的html
+    var searchKey = document.querySelector(".search_key");
+    // 获取建议列表的父容器
+    var searchList = document.querySelector(".search_list");
+    // 搜索建议数组
+    // 今天天气不错
+    // <span>天气</span>
+    var KeyWord = ['今天天气不错','心情不错', '今天不上课','我要学习HTML', '学习JS不错', '天气是阴天'];
+    // 存放符合用户条件的数据
+    var NewKeyWord = [];
+
+    // 给input绑定输入事件
+    searchKey.oninput = function (e) {
+        // 判断用户输入输入内容，或者是否在删除内容
+        if (searchKey.value.length == 0 || e.data == null) {
+            // 清空上次搜索的数组
+            NewKeyWord = []
+            // 清空上次遗留的html
+            document.querySelector(".search_list").innerHTML = ""
+            // 把建议列表隐藏
+            searchList.className = "search_list none"
+            // 判断用户是否在删除，如果是 先清除上次的数组和html，之后重新匹配运行
+            e.data == null ? PiPei() : ''
+
+        // 输入不为空，开始匹配    
+        } else {
+            PiPei()
+        }
+    }
+
+    function PiPei() {
+        // 遍历搜索建议数组
+        KeyWord.forEach(function(val,index) {
+            // 只有在输入的长度不为0的情况下，并且能够在 搜索建议数组 能匹配到数值的情况下才保存数据到新数组
+            if (searchKey.value.length != 0 && val.indexOf(searchKey.value) > -1) {
+
+                // 截取符合用户输入的关键词出来，然后拼接成html带上颜色
+                var jqukey = `<span style="color: red">${val.substring(val.indexOf(searchKey.value), val.indexOf(searchKey.value) + searchKey.value.length)}</span>`
+                // 将拼接好带颜色的字符串 替换到 原本的字符串中，并覆盖原本字符串
+                val = val.replace(searchKey.value, jqukey)
+                // 保存到新数组
+                NewKeyWord.push(val)
+            }
+        });
+        
+        // 遍历渲染到页面
+        NewKeyWord.forEach(function(val,index){
+            // 插入li标签到ul里面
+            document.querySelector(".search_list").innerHTML += `<li>${val}</li>`
+        });
+        
+        // 显示 建议列表
+        searchList.className = "search_list"
+    }
+</script>
+</html>