Wikipedia内を検索する

Result

Wikipedia内を検索、その場に表示

jQuery

window.onload = function() {
    document.getElementById("search-query").focus();
};

$(document).ready(function() {
//Wikipedia内を検索
    $("#search-button").on('click', function() {
      $('#results-indicate').css('display', 'block');
    var keyword = document.getElementById("search-query").value;
      document.getElementById('search-term').innerHTML = keyword;
//検索キーワードをパスに埋め込んでJSONP受取り
    var url = "https://ja.wikipedia.org/w/api.php?action=opensearch&search=" + keyword + "&limit=10&format=json&callback=?"
    
  $.ajax({
//パースして実装
    url: url,
    dataType: 'jsonp',
    success: function(info) {
      document.getElementById("the-results").innerHTML = '';
      
      var headlines = info[1];
      var extract = info[2];
      var link = info[3];
      

      for (i = 0; i < headlines.length; i++) {
        document.getElementById("the-results").innerHTML += '<strong>' + '<a href="' + link[i] + '" target="_blank">' + headlines[i] + '</a>' + '</strong>' + '<br>' + '<font color="green">' + link[i] + '</font>' + '<br>' + extract[i] + '<br><br>';
      }
    }
  })
  })
 
  $('#search-query').keyup(function(event){
        if (event.keyCode == 13) {
          event.preventDefault();
          $('#search-button').click();
        }
      })
})

html

<input type="text" name="search" placeholder="Wikipedia内を検索" class="form-control" id="search-query">
        <button class="btn" id="search-button">検索する</button>
        <a href="https://ja.wikipedia.org/wiki/Special:Random" target="_blank"><button class="btn">ランダムでページを表示</button></a>

  <div id="results-indicate">"<span id="search-term"></span>"の検索結果</div>
  <div id="the-results"></div>

via

Wikipedia Viewer