97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
class Search {
|
|
|
|
page = 1;
|
|
totalPage = 0;
|
|
keyword = "";
|
|
totalArr = [];
|
|
|
|
constructor() {
|
|
util.header(
|
|
`<input class="flex1" type="text" placeholder="输入关键字">`,
|
|
`<div class="button">搜索</div>`,
|
|
`<i class="iconfont icon-fanhui"></i>`
|
|
)
|
|
this.getSearchHotData()
|
|
this.event()
|
|
}
|
|
|
|
|
|
async getSearchHotData() {
|
|
let { hotKeyword, recommend } = await searchServe.searchHot()
|
|
|
|
$(".search_list ul").innerHTML = hotKeyword.maps(v => {
|
|
return `
|
|
<li>
|
|
<a>${v}</a>
|
|
</li>
|
|
`
|
|
});
|
|
|
|
item(".search_recommend", recommend, 2)
|
|
|
|
$(".search_recommend ul li").forEach(v => {
|
|
v.onclick = () => {
|
|
// 把你点击的文字放到搜索框里面
|
|
$(".header input").value = v.innerText
|
|
$(".header .button").onclick()
|
|
}
|
|
})
|
|
}
|
|
|
|
event() {
|
|
|
|
let input = $(".header input")
|
|
|
|
$(".header .button").onclick = async () => {
|
|
if (input.value.length != 0) {
|
|
this.keyword = input.value
|
|
this.totalArr = []
|
|
await this.getSearchKeyData()
|
|
if (this.totalArr.length != 0) {
|
|
util.hidden(".no-search")
|
|
item(".have-search ul", this.totalArr)
|
|
util.show(".have-search")
|
|
this.onscroll()
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
input.oninput = () => {
|
|
if (input.value.length == 0) {
|
|
util.show(".no-search")
|
|
util.hidden(".have-search")
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 用来发送搜索请求的
|
|
async getSearchKeyData() {
|
|
let { totalPage, list } = await searchServe.searchKey({
|
|
keyword: this.keyword,
|
|
page: this.page
|
|
})
|
|
this.totalPage = totalPage
|
|
list.forEach(v => this.totalArr.push(v));
|
|
}
|
|
|
|
// 滚动到底部实现自动加载下一页数据
|
|
onscroll() {
|
|
window.onscroll = async () => {
|
|
var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
|
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
|
var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
|
|
|
|
if (clientHeight + Math.ceil(scrollTop) >= scrollHeight) {
|
|
this.page += 1
|
|
if (this.page <= this.totalPage) {
|
|
await this.getSearchKeyData()
|
|
item(".have-search ul", this.totalArr)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
new Search |