Jean's Wikipedia Viewer

index.html

head
 title Jean's Wikipedia Viewer 

h2 Wikipedia Viewer

input#search(type='text' placeholder='What Do You Want To Search For ?')

<br>

a(href='https://en.wikipedia.org/wiki/Special:Random', target='_blank')
  button Random<br>Article
  
.container

Jean's Wikipedia Viewer.markdown

Jean's Wikipedia Viewer

A Wikipedia-based search engine. Click on "Random Article" to get redirected to a... random article!

A Pen by Jean on CodePen.

License.

script.js

$(document).ready(function() {

  var search = '';

  var num = 0;

  var tags = [];

  $('#search').on('input', function() {
    $.get('https://en.wikipedia.org/w/api.php?action=opensearch&search=' + $('#search').val() + '&limit=5&namespace=0&format=json', function(data) {

      tags = data[1];

      $('#search').autocomplete("option", {
        source: tags
      });

      $('#search').autocomplete("search");

    }, "jsonp");

  });

  $('#search').autocomplete({
    source: tags,
    messages: {
      noResults: '',
      results: function() {}
    },
    minChars: 0,
    select: function(event, ui) {

      $('#search').val(ui.item.value);

      search = $('#search').val();

      $('.container').empty();
      searchFun();
    }
  });

  function searchFun() {

    console.log(search);
    $.ajax({
      url: 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrsearch=' + search + '&gsrlimit=10&prop=extracts&exintro&explaintext&exsentences=1&exlimit=max',
      type: 'GET',
      contentType: 'application/json',
      dataType: 'jsonp',
      success: function(data) {

        $.each(data.query.pages, function(index, value) {

          $('<div/>', {
            class: 'items',
            id: search.replace(/ /g, "-").replace(/\(/g, "-").replace(/\)/g, "-") + num,
          }).appendTo('.container');

          console.log(search.replace(" ", "-") + num);

          $('#' + search.replace(/ /g, "-").replace(/\(/g, "-").replace(/\)/g, "-") + num).html('<a href="http://en.wikipedia.org/?curid=' + value.pageid + '" target="_blank"><h3>' + value.title + '</h3>' + '<p>' + value.extract + '</p></a>');
          console.log(search.replace(" ", "-") + num);
          num++;

        });

      }
    });
  }

  $('#search').keypress(function(e) {
    if (e.which == 13) {
      search = $('#search').val();

      $('.container').empty();
      searchFun();
    }
  });

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

@import "bourbon";

@import url(https://fonts.googleapis.com/css?family=Merriweather|Tinos|Sarala|Cinzel|Cardo|Handlee|Abel|Alegreya);

$someWhite: #f6f2f2;
$someGrey: #ccc8c8;
$somePurple: #200029;
$someOrange: #f07b04;
$someBlue: #162234;

h1{
  color: $someGrey;
  font-family: 'Cinzel';
  font-size: 35px;
}

h2 {
  font-family: 'Cardo';
  color: $someWhite;
  font-size: 35px;
  margin-top: 2%;
  margin-bottom: 3.5%;
  text-shadow: 1px 1px 1px #aaa;
}

body{
  text-align: center;
  background-color: $somePurple;
  font-family: Open Sans;
  margin-top: 10%;
  margin-bottom: 10%;
}

.ui-autocomplete {
    background: white;
    list-style-type: none;
    text-align: left;
    width: 130px;
    padding:0; 
    margin:0;
    border: 5px solid orange;
    border-radius: 10px;
}

.ui-helper-hidden-accessible { 
  display:none; 
}

.container{
  margin-top: 20px;
}

.items{
  background-color: white;
  max-width: 1500px;
  margin: 0 auto;
  margin-bottom: 10px;
  text-align: left;
  padding-top: 10px;
  padding-left: 20px;
  padding-bottom: 10px;
}

input{
  background-color: $someBlue;
  color: $someWhite;
  border-size: 5px;
  border-color: orange;
  border-radius: 20px;
  outline: 0;
  text-indent: 3%;
  font-family: 'Sarala';
  width: 19%;
  margin-bottom: 2.5%;
}

button{
  background-color: $somePurple;
  color: $someWhite;
  border-size: 3.5px;
  border-color: orange;
  margin-left: 20px;
  border-radius: 45%;
  font-family: 'Abel';
  outline: 0;
  text-align: center;
  padding: 10px;
}

a{
  text-decoration: none;
  color: inherit;
}

.title{
  color: orange;
  font-size: 60px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />