WikiSearch

index.html

<div id='main-wrapper'>
  <div id='search-box-wrapper'><input type='text' id='search-box' class='form-control input-lg' placeholder='SEARCH WIKIPEDIA' /></div>
  <div id='results-wrapper'></div>
</div>

script.js

var results = [];

var wikiSearch = function() {
  $('#results-wrapper').empty();

  results = [];
  
  if (!$('#search-box').val()) {
    return;
  }
  
  $.ajax({
    url: 'https://en.wikipedia.org/w/api.php',
    type: 'GET',
    dataType: 'jsonp',
    crossDomain: 'true',
    data: {
      'action': 'query',
      'list': 'search',
      'srsearch': $('#search-box').val(),
      'format': 'json'
    },
    success: function(data) {
      data.query.search.map(function(result) {
        results.push({
          title: result.title,
          url: 'https://en.wikipedia.org/wiki/' + result.title.split(' ').join('_'),
          snippet: result.snippet + '...'
        })
      });
    }
  });
}

$(document).ready(function() {
  var timer = 0;

  $('#search-box').focusin(function(event) {
    $(this).attr('placeholder','');
  })
  .focusout(function (event) {
    $(this).attr('placeholder', 'SEARCH WIKIPEDIA');
  })
  .keyup(function(event) {
    clearTimeout(timer);
    timer = setTimeout(wikiSearch, 300);
  });

}).ajaxSuccess(function() {

  results.forEach(function(result) {
    var html = '<div class="result panel panel-info"><div class="result-title panel-heading"><h3><a href="' + result.url + '" target="_blank">';
    html += result.title + '</a></h3></div>';
    html += '<div class="result-snippet panel-body">' + result.snippet + '</div>';
    html += '</div>';
    $('#results-wrapper').append(html);
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

#main-wrapper {
  padding: 0;
  width: 100%;
}

#search-box-wrapper {
  width: 100%;
  padding: 50px 0;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #ffffff;
  text-align: center;
}

#search-box {
  text-align: center;
  text-transform: uppercase;
  color: #31708f;
  width: 70%;
  margin: 0 auto;
  min-width: 400px;
  border: 2px #bce8f1 solid;
  background-position: 0;
  background-image: url('http://i47.tinypic.com/r02vbq.png');
  background-repeat: no-repeat;
}

#results-wrapper {
  padding: 10px 10px 100px;
  width: 70%;
  min-width: 400px;
  margin: 150px auto 0;
}

.result-title h3 {
  padding: 0;
  margin: 0;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

wikisearch.markdown

WikiSearch

A live-search application using the Wikipedia.com API

A Pen by Rem Lampa on CodePen.

License.