CODEWITHSUNDEEP
javascriptjsonapi
Dan
Dan

Reputation: 517

Retrieving gif search from Form Search Tenor API, Json

Ok, I need to create a search form to retrieve the gifs from the tenor API...(Json)...In this case I know how to retrieve them...

PROBLEM

I need to integrate a realtime search input (or a basic form to start with it)...for example if I write aa it looks up for gifs that starts with aa..the problem would be in this line 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>

Upvotes: 0

Views: 984

Answers (1)

Jason Y
Jason Y

Reputation: 1011

I would attach an event handler to the input field that listens for a change event. You'll then want to filter through your array of images and compare the items to your input value. Below is a quick proof of concept. You'll want to refactor this and also add a condition that checks for no match.

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

Upvotes: 1

Related Questions