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