Wikipedia search using the JSON API What could I do better in my code or logic?

Wikipedia Search

$(function(){

  $('.search-input').keyup(function(data){

  var pesquisar = $('.search-input').val();

  $('.box-logo').fadeOut(500, function(){
    $('header').css('padding','12px 0');  
  });

$.getJSON('https://en.wikipedia.org/w/api.php?format=json&amp;action=query&amp;generator=search&amp;gsrnamespace=0&amp;gsrlimit=10&amp;prop=pageimages|extracts&amp;pilimit=max&amp;exintro&amp;explaintext&amp;exsentences=1&amp;exlimit=max&amp;gsrsearch='+ pesquisar +'&amp;callback=?',function(data){

  console.log(data);

  var key;

  $('.sec-result .row').html('');
  for(key in data.query.pages){

    var titleArt = data.query.pages[key].title;
    var extractArt = data.query.pages[key].extract;
    var linkArt = 'https://en.wikipedia.org/?curid=' + data.query.pages[key].pageid;
    var imgArt;

    if(data.query.pages[key].hasOwnProperty('thumbnail')){
      imgArt = data.query.pages[key].thumbnail.source;
    } else {
      imgArt = 'http://www.wallpaperup.com/uploads/wallpapers/2014/04/02/319530/big_thumb_e96d0c33f97706bc093572bc613cb23d.jpg';
    }

    var contentHTML = '&lt;div class="col-md-4"&gt;&lt;div class="box-result"&gt;&lt;div class="bg-result"&gt;&lt;/div&gt;&lt;a href="' +  linkArt + '" target="_blank"&gt;&lt;div class="box-content center-block"&gt;&lt;div class="article-thumbnail"&gt;&lt;img src="' + imgArt + '" alt="" /&gt;&lt;/div&gt;&lt;h1&gt;'+ titleArt +'&lt;/h1&gt;&lt;p&gt;' + extractArt + '&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;';

    $('.sec-result .row').append(contentHTML);
  }

 });



 })

})
I would use map to replace all the data.query.pages[key]. into a single variable. Also ES6 template string is very useful, if you are not using ES6, just change it into one line string like you did in your original solution. map return an array, so I have to join('') them into a single string. Then I can just use it to pass to the jquery html() function and replace the content. Also, ? : shorthand for if else statement can produce less code in one line.

$('.sec-result .row').html(
    data.query.pages.map(page =&gt; (
        `&lt;div class="col-md-4"&gt;
            &lt;div class="box-result"&gt;
                &lt;div class="bg-result"&gt;&lt;/div&gt;
                &lt;a href="https://en.wikipedia.org/?curid=${page.pageid}" target="_blank"&gt;
                    &lt;div class="box-content center-block"&gt;
                        &lt;div class="article-thumbnail"&gt;
                            &lt;img src="${page.thumbnail ? page.thumbnail.source : 'http://www.wallpaperup.com/uploads/wallpapers/2014/04/02/319530/big_thumb_e96d0c33f97706bc093572bc613cb23d.jpg'}" alt="" /&gt;
                        &lt;/div&gt;
                        &lt;h1&gt;${page.title}&lt;/h1&gt;
                        &lt;p&gt;${page.extract}&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;`
    )).join('')
);


My solution is just for readability, it may not increase the speed though.