javascript - 从表单搜索 Tenor API、Json 检索 gif 搜索

Question

好吧，我需要创建一个搜索表单来从 tenor API 检索 gif...(Json)...在这种情况下我知道如何检索它们...

问题

我需要集成实时搜索输入(或从其开始的基本表单)...例如，如果我写 aa它会查找以aa开头的gif ..问题出在这一行 var search_term = document.getElementById("search_text").value;

JAVASCRIPT/JSON

function tenorCallback_search(responsetext)
 {
// parse the json response
var response_objects = JSON.parse(responsetext);

top_10_gifs = response_objects["results"];

// load the GIFs -- for our example we will load the first GIFs preview size (nanogif) and share size (tinygif)

  // document.getElementById("preview_gif").src = top_10_gifs[0]["media"][0]["nanogif"]["url"];

  // document.getElementById("share_gif").src = top_10_gifs[0]["media"][0]["tinygif"]["url"];

response_objects.results.forEach((gifObj, i) => {


img_gif_created= document.createElement('img');
img_gif_created.setAttribute("id", "gif_"+i)
 // do something with each gifObj
 document.querySelector('.container')
.appendChild(img_gif_created)
.src = gifObj.media[0].nanogif.url;
});



return;

 }


 // function to call the trending and category endpoints
 function grab_data(anon_id)
  {
// set the apikey and limit
var apikey = "***************";
var lmt =50;

// test search term
var search_term = document.getElementById("search_text").value;

// using default locale of en_US
var search_url = "https://api.tenor.com/v1/search?tag=" + search_term + "&key=" +
        apikey + "&limit=" + lmt + "&anon_id=" + anon_id;

httpGetAsync(search_url,tenorCallback_search);

// data will be loaded by each call's callback
return;
}

HTML

<form method="GET" action="">
  <input type=text id="search_text" >
   <input type=submit>
</form>

 <div class="container"></div>

Answer 1

我会将一个事件处理程序附加到监听更改事件的输入字段。然后，您需要过滤图像数组并将这些项目与您的输入值进行比较。下面是一个快速的概念证明。您需要重构它并添加一个检查不匹配的条件。

ES6:

const images = ['aa908.gif', 'aa745.gif', 'foo26.gif', 'bar222.gif'];

const input = document.getElementById('search_text');
let searchTextVal = '';

input.addEventListener('input', function () {
    searchTextVal = this.value.toLowerCase();
    let startsWith = images.filter((image) => image.startsWith(searchTextVal));
    console.log(startsWith);
});

ES5:

'use strict';

var images = ['aa908.gif', 'aa745.gif', 'foo26.gif', 'bar222.gif'];

var input = document.getElementById('search_text');
var searchTextVal = '';

input.addEventListener('input', function () {
    searchTextVal = this.value.toLowerCase();
    var startsWith = images.filter(function (image) {
        return image.startsWith(searchTextVal);
    });
    console.log(startsWith);
});

JSFiddle