问题描述
我正在创建一个使用 GIPHY API 的 gif 网站。在这个网站中,我添加了一个“搜索栏”,您可以在其中输入您要寻找的 GIF 类型,网站会从 GIPHY 返回 12 个 GIF。
async function buscarGifs(valorDeInput,tipoRequest1,tipoRequest2,limit,num){
let urlSearch = `https://api.giphy.com/v1/${tipoRequest1}/${tipoRequest2}?api_key=${apiKey}&q=${valorDeInput}&limit=${limit}&offset=${num}&rating=g&lang=es`;
let response = await fetch(urlSearch);
return response.json();
}
我试图做的是创建一个“查看更多”功能:当您单击“查看更多”按钮时,限制被修改,并且网络向您显示另外 12 个 gif(加上来自初始搜索)。
这就是我调用“buscarGifs”(gif 搜索)功能的方式:
inputSearch.addEventListener("keyup",(event)=>{
if(event.keyCode === 13){ //Activa búsqueda con enter.
printSearch(buscarGifs(inputSearch.value,"gifs","search",1,0),inputSearch.value);//Busca en API e imprime en DOM.
inputSearch.value = ""; //Vaciar casilla de búsqueda.
}
});
你会怎么做?
谢谢!
解决方法
你可以尝试类似的东西,
showMoreBtn.addEventListener("click",() => {
printSearch(buscarGifs(inputSearch.value,"gifs","search",1,0),inputSearch.value);
inputSearch.value = "";
}
相应地修改 limit
和 num
参数。我不确定你为什么首先使用 1 和 0 来获取前 12 条记录。
保存当前搜索查询、偏移量和总结果
let currentQuery,resultOffset,totalCount;
async function buscarGifs(valorDeInput,tipoRequest1,tipoRequest2,limit,num) {
let urlSearch = `https://api.giphy.com/v1/${tipoRequest1}/${tipoRequest2}?api_key=${apiKey}&q=${valorDeInput}&limit=${limit}&offset=${num}&rating=g&lang=es`;
let response = await fetch(urlSearch);
let results = response.json();
// update total results
totalCount = results.pagination.total_count;
// show hide more button
if(resultOffset > totalCount){
alert('no more results,remove more button');
}
return results;
}
inputSearch.addEventListener("keyup",(event) => {
if (event.keyCode === 13) {
currentQuery = inputSearch.value;
// new search,reset to 0
resultOffset = 0;
printSearch(buscarGifs(currentQuery,12,currentQuery);
inputSearch.value = "";
}
})
// the more button
moreButton.addEventListener("click",(event) => {
resultOffset += 12
printSearch(buscarGifs(currentQuery,resultOffset),currentQuery);
})