Display search results for TV shows
Since in both instances HTML is the same, it could be extracted to another function;
target.value appended to the URL needs to go through EncodeURIComponent() to avoid bugs, surprises and even XSS;
topTenShows has actually only 9 shows. Second argument of .slice() is exclusive;
It would be better to listen to input event instead of keydown. Right now, when you type, the last character doesn't make it into request.


Rewrite



const app              = document.querySelector('#app'),
      inputSearchField = document.querySelector('.inputSearchField'),
      apiEndpoint      = 'https://api.tvmaze.com',
      noImagePath      = 'design/icons/No_image_available.svg';

/**
 * For each object representing one show, creates HTML source and sets them all as content of #app
 * @param  {object} shows Array containing objects representing API results
 * @return {string}       HTML that got set as content of #app (unused)
 */
const buildShowsHTML = shows =&gt; {
  app.innerHTML = shows.map(obj =&gt; {
    const show = obj.show || obj;
    const img = show.image ? `&lt;img src="${show.image.medium}"/&gt;` : `&lt;img class="fallbackImage" src="${noImagePath}"/&gt;`;

    return `
      &lt;div class="col-sm movie-content"&gt;
        &lt;div class="movie-image"&gt;
          ${img}
        &lt;/div&gt;
        &lt;div class="movie-info"&gt;
          &lt;h1&gt;${show.name}&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;`;
  }).join('');
};

/**
 * Gets top 10 shows from the input array of objects
 * @param  {object} arr Array containing objects representing API results
 * @return {object}     Array of top 10 shows
 */
const getTopTenShows = arr =&gt; arr
  .filter(show =&gt; show.rating.average)
  .sort((a, b) =&gt; a.rating.average &gt; b.rating.average ? -1 : 1)
  .slice(0, 10); // tar element [0 – 10) i arrayen

// Show top 10 shows upon load
fetch(`${apiEndpoint}/shows`).then(resp =&gt; resp.json()).then(getTopTenShows).then(buildShowsHTML);

// Show the search results on user input
inputSearchField.addEventListener('input', event =&gt; {
  const input = encodeURIComponent(event.target.value);
  fetch(`${apiEndpoint}/search/shows?q=${input}`).then(resp =&gt; resp.json()).then(buildShowsHTML);
});
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;meta name="viewport" content="width=device-width"/&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"/&gt;
  &lt;title&gt;Demo&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;input class="inputSearchField"/&gt;
  &lt;main id="app"&gt;&lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;