first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/百度建议3.html
+++ b/历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/百度建议3.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>百度搜索建议2</title>
+    <style>
+        .list li {
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+    <input type="text" name="" id="">
+    <button>搜索</button>
+    <ul class="list"></ul>
+</body>
+<script>
+    
+    // 实现搜索建议
+    //  1 放置input，button，ul li
+    //  2 给input绑定 oninput 事件，实时获取用户输入的 东西
+    //  3 从本地的所有搜索建议的数组中，筛选出包含 用户 输入内容 的  搜索建议
+    //  4 把符合条件的  展示  在  ul li 里面给用户看
+    //  5 给 ul li 中所有 li 都绑定点击事件，点击时候获取  li 的文本内容，并为输入框重新赋值，
+    //    然后实现百度搜索。
+
+    // 关键字加红
+
+    var keyWordList = [
+        '今天出太阳了', '太阳很好', '不喜欢js学习',
+        'js编程很简单', '喜欢很简单的html', '今天不想学习html，只想出去玩',
+        '今天不想学习css', '今晚出去飙车', '明天出去修车'
+    ];
+
+    var newKeyList = []
+    var input = $("input"),
+        ul = $("ul"),
+        ul_li = $("ul li");
+
+        input.oninput = () => {
+            // console.log(input.value);
+            newKeyList = []
+            keyWordList.forEach( (v,i) => {
+               // console.log(v);
+               if(v.includes(input.value)){
+                   newKeyList.push(v)//在数组中添加数据
+               }
+            })
+            renderUl()
+        }
+        function renderUl(){
+            var liHtml = ""
+            newKeyList = forEach(v => {
+                ul.innerHTML +=`<li>${V}</li>`
+            })
+            bindLiClick()
+        }
+
+        function bindLiClick() {
+            _("ul li").forEach(v => {
+                v.onclick =() => {
+                    input.value= v.innerText
+                    SearchBaidu(v.innerText)
+                }
+            })
+        }
+
+    function SearchBaidu(text) {
+        open(`https://www.baidu.com/s?wd=${text}`)
+    }
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+
+</html>