0

我正在创建一个使用 GIPHY API 的 gif 网站。在这个网站中，我添加了一个“搜索栏”，您可以在其中输入您要查找的 GIF 类型，网站会返回 12 个来自 GIPHY 的 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（加上最初搜索的前 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.
}

});

你会怎么做？

谢谢！

4

2 回答 2

0

你可以尝试类似的东西，

showMoreBtn.addEventListener("click", () => { 
  printSearch(buscarGifs(inputSearch.value,"gifs","search",1,0),inputSearch.value);
  inputSearch.value = "";
}

相应地修改limit和num参数。我不确定您为什么首先使用 1 和 0 来获取前十二条记录。

于 2021-04-01T00:22:49.033 回答
0

保存当前搜索查询、偏移量和总结果

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, "gifs", "search", 12, 0), currentQuery);
    inputSearch.value = "";
  }
})

// the more button
moreButton.addEventListener("click", (event) => {
  resultOffset += 12
  printSearch(buscarGifs(currentQuery, "gifs", "search", 12, resultOffset), currentQuery);
})
于 2021-04-01T01:59:16.587 回答