first commit

历届学生/逯帅帅/项目开发/上课项目/屁桃儿/js/page/search.js

@@ -0,0 +1,70 @@
+class Search {
+    constructor() {
+        this.getSearch();
+        //判断标准位
+        this.coke = true;
+        
+
+    }
+
+    async getSearch() {
+        
+        //输入框注册点击事件
+        $('input').on('input', () => {
+            //输入框的内容发生改变就为true
+            this.coke = true;
+            //判断输入框里面的value值是否为空，为空就情况页面
+            if ($('input').val()) {
+                $('.coontent').html('');
+            }
+        })
+       
+        //输入框注册点击事件
+        $('.icon-search').on('click', async () => {
+            //判断输入框value值是否为0，不为0执行下面条件，为0不执行下面条件
+            if ($('input').val().length != 0) {
+              
+                if (this.coke) {
+                    //先置空
+                    $('.coontent').html('');
+                    var res = await indexService.search({
+                        keyword: $('input').val(),
+                        page: this.page
+                    });
+
+                    //标志位
+                    this.coke=false;
+
+                    //遍历，渲染页面
+                    $(res).each((index,item) => {
+                        $('.coontent').append(`
+                    <a href="./info.html?id=${item.id}">
+                    <img src="${item.preview}" alt="">
+                    <p>${item.title}</p>
+                    </a>
+                    `)
+                    });
+
+                    console.log(res.length);
+                    //res。length是用户搜索内容，返回的内容长度，等于0就说明没有搜索到内容
+                    if (res.length == 0) {
+                        $('.coontent').append(`<p>没有关于这方面的奇怪内容哦</p>`);
+                    }
+                    
+                }
+            }
+
+        })
+
+
+    }
+
+
+
+}
+
+new Search();
+
+// 思考？重复点击会一直发送请求，改如何取消重复发送请求？
+// 办法：设置一个标准位，默认为true，为true可以点击搜索，
+//     搜索完毕不管结果怎么样，吧标准位改为false，当用户输入内容发送改变（使用oninput事件监听输入框的值是否发送改变）的时候再把标准位改为true