Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

If you open up the CSS Settings or JS Settings panels and start typing into the URL field for an external resource, you’ll notice the Typeahead feature is now a bit different.


We removed the Typeahead library we were using and replaced it with Twitter’s slightly newer typeahead.js. There were two big reasons for this:

  1. The new library supports prefetching. We don’t load up all the data on page load, we wait until you click into that input and then Ajax over all the data needed. Before, we were inline-ing that data so this is a 80K (!) savings per uncached page load.

  2. The new library supports templating, so we can show you the name of the library as well as the URL when selecting, so it’s a lot more obvious what you are selecting. Especially since the majority of URL’s we display are from CDNJS and start exactly the same.

An interesting aside…

Twitter’s typeahead.js library requires the prefetch data to be in a very specific format called a Datum. CDNJS doesn’t provide the libraries they have available in this format. We certainly weren’t going to hand-author that JSON, that’s what we have computers for! We wrote up a bit of jQuery to run in the console on their homepage that will find the rows of the table with all the libraries in it, pluck out the bits we needed, construct the JSON from it, and copy it to the clipboard.

Here’s that code in case it is of any use:

var newJSON = "[", name, url, thing;

$(".table-striped tbody tr").each(function(i, el) {

  thing = $(el);

  name = thing.find("td:first a").text();
  url = "https:";
  url += thing.find("td:last p").text();
  token = url.split("/");
  token = token[token.length - 1];
  token = token.split('.');
  token = token[0];

  newJSON += '{\n';
  newJSON += '  "name": "' + name + '",\n';
  newJSON += '  "value": "' + url + '",\n';
  newJSON += '  "tokens": ["' + token + '"]\n';
  newJSON += '},';


newJSON += "]";