cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container">
  <section class="form-control">
    <label for="user-query"><span class="mag">&#8981;</span><input type="text" name="user-query" id="user-query" placeholder="Search en.wikipedia.org"></label>
    <ul id="dropdown"></ul>
  </section>
  <section class="search-output">
    <p id="article-excerpt"></p>
    <a href="" target="_blank" id="article-link">Read More...</a>
  </section>
  <section class="random">
    <button id="random">See a Random Article</button>
  </section>
</div>
            
          
!
            
              * {
  box-sizing: border-box;
  position: relative;
}
body {
  margin: 80px auto;
  padding: 10px 40px;
  text-align: center;
  font-family: "Hind", sans-serif;
  color: #555;
  max-width: 640px;
  overflow-x: hidden;
  background-color: white;
}
.mag {
  font-size: 180%;
  position: absolute;
  left: -24px;
  top: -3px;
  color: #ddd;
  transition: 0.15s ease-in-out all;
}
label:hover .mag {
  color: #aaa;
  transition: 0.15s ease-in-out all;
}
input {
  font-family: "Hind", sans-serif;
  height: 1.2em;
  margin: 0 auto;
  width: 90%;
  border: none;
  border-bottom: thin solid #ccc;
  padding: 0.3em;
  &::placeholder {
    color: #ddd;
    font-style: italic;
  }
  &:focus {
    outline: none;
  }
}
#dropdown {
  list-style: none;
  padding: 0;
  margin-top: 0;
  cursor: pointer;
  li {
    text-align: left;
    padding: 6px;
    background-color: #eee;
    border-bottom: thin solid #ddd;
    &:hover {
      background-color: lightblue;
    }
    &:last-of-type {
      border: none;
    }
  }
}
#article-excerpt {
  text-align: left;
  line-height: 1.4em;
}
#article-link {
  display: none;
}
.random {
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 80px;
  left: 0;
  height: 2em;
  button {
    font-family: "Hind", sans-serif;
    background-color: white;
    border: thin solid #ddd;
    padding: 0.4em;
    border-radius: 1em;
    color: #ccc;
    transition: 0.25s ease-in-out all;
    &:hover {
      color: #fff;
      background-color: #ddd;
      cursor: pointer;
    }
  }
}

@media (max-width: 374px) {
  body {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-height: 700px) {
  body {
    margin: 0 auto 60px auto;
  }
  .random {
    bottom: 10px;
  }
}
            
          
!
            
              'use strict';
// these globals will maintain the query results between functions
let __autoCompleteTimeout, __currentQueryString, __currentQueryMatches;

$(document).ready(function(){
  // choose a random article as a template
  getRandomArticle();
  
  // anytime the user lifts a key while the input is focused, run the setSuggestionTimer to match queries
  $(document).keyup(()=>{
    if (document.activeElement.id == "user-query") {
      setSuggestionTimer();
    }
    return false;
  });
  // when the user-query field gains focus, show the dropdown if it contains anything
  $("#user-query").focus(()=>{
    if (__currentQueryString && $("#dropdown").children().length > 0) {
      $("#dropdown").slideDown();
    }
  });
  // listen for clicks and...
  $(window).click(function(e){
    // ...select an article based on a clicked dropdown item, or...
    if (e.target.className == 'dropdown-item') {
      let index = $(e.target).index();
      $("#user-query").val(e.target.textContent);
      $("#dropdown").slideUp();
      $("#article-title").text(__currentQueryMatches[1][index]);
      $("#article-excerpt").text(__currentQueryMatches[2][index] == "" ? "This article doesn't appear to have an excerpt set! There is an article on this though, I promise: click the read more link below to head to the article page." : __currentQueryMatches[2][index]);
      $("#article-link").attr("href", __currentQueryMatches[3][index]);
      window.setTimeout(()=>{
        $("#article-link").fadeIn();
      }, 2000);
      return true;   // ...(return here, so that additional handling of dropdown items isn't necessary)...
    }
    // ...if the dropdown menu is open and the used clicked anywhere else on the page, collapse the dropdown
    if (e.target.id !== 'user-query') {
      if ($("#dropdown").css("display") !== 'none') {
        $("#dropdown").slideUp();
      }
    }
  });
  // listen for clicks on the random article button, and populate a random article
  $("#random").click(getRandomArticle);
});

// fetch a random article using the API's summary request
function getRandomArticle(){
   $.ajax('https://en.wikipedia.org/api/rest_v1/page/random/summary', {
    /*
    response structure
    description: a quick description of the article subject
    dir: "ltr" (e.g.) the article's default text direction
    displaytitle: a (potentially) HTML formatted title. e.g., an italicized album name will include <i> tags
    extract: article extract text
    extract_html: article extract with HTML formatting
    lang: the article language
    originalimage: and object with the article's original image information
      {
        source: link to the article's image;
        width: image width in px
        height: image height in px
      }
    pageid: Wiki page ID number
    thumbnail: an object with thumbnail information
      {
        source: link to a smaller version of the article's image;
        width: image width in px
        height: image height in px
        original: link to the original size image
      }
      timestamp: article timestamp
      title: the article title in plain text
    */
    data: {
      'origin': '*'
    },
    dataType: 'json',
    type: 'GET',
    success: function(data){
      __currentQueryMatches = data;
      $("#user-query").val(__currentQueryMatches.title);
      $("#article-title").text(__currentQueryMatches.title);
      $("#article-excerpt").text(__currentQueryMatches.extract);
      $("#article-link").attr("href", "https://en.wikipedia.org/wiki/" + __currentQueryMatches.title);
      window.setTimeout(()=>{
        $("#article-link").fadeIn();
      }, 2500);
    }
  });
}

function setSuggestionTimer(){
  // if there is a timeout, clear it, and hide the select
  window.clearTimeout(__autoCompleteTimeout);
  
  // set the new timeout here
  __autoCompleteTimeout = window.setTimeout(()=>{
    // if the user-query value is an empty string, clear the timeout, clear the global currentQueryString and hide the dropdown
    if ($("#user-query").val() === "") {
      __currentQueryString = ''
      window.clearTimeout(__autoCompleteTimeout);
      $("#dropdown").slideUp(400, ()=>{$("#dropdown").html("")});
      return false;
    }
    // if the user-query hasn't changed since the last keyup, just clear the timeout
    if (__currentQueryString && $("#user-query").val() === __currentQueryString.toLowerCase()) {
      window.clearTimeout(__autoCompleteTimeout);
      return false;
    }
    // otherwise, set the global currentQueryString to the user-query value
    // use the currentQueryString for an api call, which will populate the dropdown
    __currentQueryString = $("#user-query").val();
    queryWiki(__currentQueryString);
  }, 1200);
}

function populateDropdown(arr) {
  let html = "";
  for (let i = 0; i < arr.length; i++) {
    html += "<li class='dropdown-item'>" + arr[i] + "</li>";
  }
  $("#dropdown").html(html);
  $("#dropdown").slideDown();
  return html;
}

function queryWiki(queryString) {
    $.ajax('https://en.wikipedia.org/w/api.php?action=opensearch&search=' + queryString + '&suggest&format=json', {
    /*
    response structure
    top matches for [1-3] are sequential per match
    (e.g., [1][0], [2][0] and [3][0] all go together)
    [0] query string
    [1] top matches
    [2] top match excerpt text
    [3] top match links
    */
    data: {
      'origin': '*'
    },
    dataType: 'json',
    type: 'GET',
    success: function(data){
      __currentQueryMatches = data;
      populateDropdown(__currentQueryMatches[1]);
    }
  });
}
            
          
!
999px
Loading ..................

Console