70 lines
2.2 KiB
JavaScript
70 lines
2.2 KiB
JavaScript
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
|