Edit in JSFiddle

$(function() {
	new WOW().init();
  let laurentApiURL ="http://api.nobelprize.org/v1/laureate.json";
  console.log(laurentApiURL);
            $("#URLNobel").html('<b<b>API call Nobel:</b> <a href="' + laurentApiURL + '" target=_blank>' + laurentApiURL + '</a>');


   $.ajax({
      type: "GET",
      url: laurentApiURL,
      dataType: "json",
      success: function(data) {
				console.log("Done");
        let laurentInfo = data.laureates;
        console.log(laurentInfo);
        var nrHits = laurentInfo.length;

		$("#Hits").html("We retrieved from NobelPrize.org " + nrHits + " records. Please <div data-wow-duration='6s' data-wow-offset='10' class='wow bounceInUp more'>select an Laureate</div>");   
        $.each(laurentInfo, (i, val) => {
          surname = val.surname || ''
          firstname = val.firstname || ''
          year = val.prizes[0].year || ''
          category = val.prizes[0].category || ''
	        name = firstname + " " + surname;
	        nameFull = name + " - " + year + ": " + category ;
	        if (nameFull.length > 7) // workaround as API returns garbage 
// https://phabricator.wikimedia.org/T206444 Error reported
          	{$('.laureateList').append($('<option/>').text(nameFull).val(name));}
        }
      )
	}});
	console.log("After");

 });


	$( '.searchOptionList' ).change(function() {       
    var srcopt = '&srqiprofile=' + $('.searchOptionList').val();
    $("#URL").html(srcopt);

  });

	$( '.wikiLang' ).change(function() {       
		retrieveWiki();
  });


	$( '.laureateList' ).change(function() {       
		retrieveWiki();
	});
  
	$( '.searchOptionList' ).change(function() {       
		retrieveWiki();
	});
 

  function retrieveWiki(){
    var input = $('.laureateList').val();
    //var srcopt = '&srqiprofile=classic';
    var srcopt = $('.searchOptionList').val();
    
//		srcopt = '&srqiprofile=' + $('.searchOptionList').val();
//    $("#URL").html(srcopt);
		var searchLimit = 400 // number of results in search 
    var wikiLang = $('.wikiLang').val();
    var wikiLangText = $('.wikiLang').val();
    var url = `https://` + wikiLang + `.wikipedia.org/w/api.php?action=query&list=search&srsearch=` + input + `&srlimit=` + searchLimit + `&format=json&prop=info&inprop=url` + srcopt;
    $("#URL").html('<b<b>API Wikipedia:</b> <a href="' + url + '" target=_blank>' + url + '</a>');

    $.ajax({
      type: "GET",
      url: url,
      dataType: "jsonp",
      success: function(data) {
        let info = data.query.search;
        console.log(info);

        if (info.length === 0) {
          let notFound = "";
          let output = "";
          let numberofHits = "no hits in " + wikiLangText + " Wikipedia" ;
          $("#Hits").html(numberofHits);          
          notFound += `
            <div id="not-found" class="wow fadeIn text-center" data-wow-duration="0.5s">
              <p> No result</p>
            </div>
          `
          $("#output").html(notFound);
          $("#not-found").delay(5000).fadeOut(500);
        } else {
          let output = "";
          let numberofHits = "Number of hits in " + wikiLangText + " Wikipedia " + info.length + " using searchtype = " + srcopt + " <div data-wow-duration='6s' data-wow-offset='10' class='wow bounceInUp more'>scroll down to learn more about " + input + " in " + wikiLangText + " Wikipedia</div>";
          $("#Hits").html(numberofHits);          
          $.each(info, (i, val) => {
            output += `
              <div class="text-left" id="results">
                  <div class="wow slideInLeft result" data-wow-offset="100" data-wow-duration="1s">
                    <h2 id="title"><a href="https://${wikiLang}.wikipedia.org/wiki/${val.title}" target="_blank">${val.title}</a></h2>
                    <p id="desc">${val.snippet}</p>
                  </div>
              </div>
                  `
          });
          
          $("#output").html(output);
        }
      },
      error: function() {
        console.log("Error");
      }
    })
}
<h2>Integration with Wikipedia:<br />
Prototype to test searching Nobel API <a href="https://nobelprize.readme.io/docs/laureate" target=_blank>laureate</a> version 1
</h2>
<div id="explain">
What knows different language Wikipedia about laureate? <br /><br />
Below all laureate  at Nobelprize.org . When selecting one prize winner a Wikipedia search is done... lesson learned is 
<ul>
<li>that we write a lot about Nobel prize winners but using text retrieval is not a good way to get good precision</li><li>a tool like <a href="https://www.mediawiki.org/wiki/Extension:ArticlePlaceholder" target=_blank>Article Placeholder</a> could be very helpful for small Wikipedia languages to get "articles" about  all Nobel prize winners</li>
</ul>if you have questions dont hesitate to contact Magnus Sälgö +46-70-5937579, <a href="https://twitter.com/salgo60" target=_blank>twitter</a></div>  <br />See also
<table border=0 width=800px><tr><td><ll class="list">
  <li><a href="https://www.mediawiki.org/wiki/API:Search">API:Search</a></li>
  <li><a href="https://phabricator.wikimedia.org/T200668">Task T200668 SPARQL federated search Nobel</a></li>
  <li><a href="https://phabricator.wikimedia.org/T203915">Task T203915 P3188 Nobel prize ID new URL?</a></li></ll></td><td valign="top"><ll>
  <li><a href="https://phabricator.wikimedia.org/T202034">Task T202034 Missing data 2017 at Nobel - fixed</a></li>
<li><a target=_blank href="https://jsfiddle.net/salgo60/wkrug0bL/embedded/result/">Same but for SKBL</a></li></ll></td></tr></table><br />Wiki Language
<select class="wikiLang">
  <option value="en">English</option>
  <option value="sv">Swedish</option>
  <option value="de">German</option>
  <option value="no">Norway</option>
  <option value="da">Danish</option>
  <option value="fi">Finland</option>
  <option value="it">Italy</option>
  <option value="ru">Russian</option>
  <option value="eo">Esperanto</option>
  <option value="ja">Japan</option>
  <option value="zh">China</option>
  <option value="pl">Poland</option>
  <option value="sq">Albanian</option>
  <option value="als">Alemannic</option>
  <option value="roa-rup">Aromanian</option>
  <option value="map-bms">Banyumasan</option>
  <option value="nds-nl">Dutch Low Saxon</option>
  <option value="bh">Bihari</option>
  <option value="zh-yue">Cantonese</option>
  <option value="ms">Min Nan</option>
  <option value="ksh">Ripuarian</option>
</select><select class="laureateList" >
  <option>Select an Laureate</option>
</select><select class="searchOptionList" >
  <option value="classic">Search option srqiprofile</option>
  <option value="classic">classic</option>
  <option value="wsum_inclinks">Weighted sum based on incoming links</option>
  <option value="wsum_inclinks_pv">Weighted sum based on incoming links and weekly pageviews</option>
  <option value="popular_inclinks_pv">Ranking based primarily on page views</option>
  <option value="popular_inclinks">Ranking based primarily on incoming link counts</option>
  <option value="engine_autoselect">Let the search engine decide on the best profile to use.</option>
</select><br /> <br />

<div id="currLaureate">
<div id="URLNobel"></div>
<div id="URL"></div>
<div id="Hits"></div>
<div id="output"></div>
 body {
   color: #444;
   background: #e2ffff;
   /* fallback for old browsers */
   background: -webkit-linear-gradient(to left, #9ab800, #e2ffff);
   /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to left, #9ab800, #e2ffff);
   /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   font-family: 'Dosis', sans-serif;
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
   font-size: 16px;
 }

 a {
   color: #444;
   cursor: pointer;
 }

 a:hover {
   color: #555;
   text-decoration: none;
 }
#URLNobel #URL {
   margin-top: 20px;
   padding: 0 5%;
   color: darkblue;
}

#Hits {
   margin-top: 20px;
   padding: 0 5%;
   color: #437746;
   font-size: 30px;
}

.more {
   color: darkgreen;
} 
#output {
   margin-top: 40px;
   padding: 0 5%;
 }

 
.list a {
  text-decoration: none;
}
 
li a:hover {
  background: lightgreen;
}

h2 a:hover {
  background: lightgreen;
}


 #text {
   padding: 10px 20px;
   border-top-left-radius: 30px;
   border-bottom-left-radius: 30px;
   border: 0px solid;
   width: 50%;
 }

 #text:focus {
   box-shadow: 1px 3px 40px 5px #536970;
   outline: none;
 }
 #not-found p {
   font-size: 20px;
  }

.result {
  padding: 0.5% 2%;
  background: #fff;
  margin: 1.5%;
  border-left: 7px solid #536976;
}

.result h2 {
  color: #536976;
}
  

 button {
   background: #536976;
   color: #fff;
   padding: 10px 20px;
   border: 1px solid #536976;
   border-radius: 30px;
   margin-left: -55px;
 }


 .currLaureate{
    background-color: aliceblue;
    margin: 8px;
    size: 12px;
    border-radius: 25px;
    border: 2px solid darkBlue;
    padding: 20px; 
    width: 500px;
    height:150px;    
 }

.searchmatch{
      color: #a0ccd2;
}
#explain
{
     color: darkgreen;
     font-family: "Times New Roman", Times, serif;     
}