<form>
  <label for="search">Search CDNjs:</label>
  <input type="search" id="search">
</form>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
  font-family: Montserrat, sans-serif;
  margin: 0;
  padding: 15px;
}
label {
  display: block;
  margin: 0 0 5px 0;
}
form,
label,
input,
.algolia-autocomplete {
  width: 100%;
  display: block;
}

.search-result {
  background: #eee;
  margin: 5px;
  padding: 15px;
  em {
    background: yellow;
  }
}
.package-title {
  font-weight: bold;
}
.package-description {
  font-size: 80%;
}
View Compiled
const cdnCSSClient = algoliasearch(
  "2QWLVLXZB6",
  "2663c73014d2e4d6d1778cc8ad9fd010"
);

const index = cdnCSSClient.initIndex("libraries");

$("#search")
  .autocomplete({ hint: false }, [
    {
      source: $.fn.autocomplete.sources.hits(index, {
        hitsPerPage: 8,
        attributesToRetrieve: [
          "fileType",
          "filename",
          "_highlightResult",
          "version",
          "name",
          "description"
        ]
      }),
      displayKey: "name",
      templates: {
        suggestion: function (suggestion) {
          return `
          <div class="search-result">
            <div class='package-title'>
              ${suggestion._highlightResult.name.value}
            </div>
            <div class='package-description'>
              ${suggestion.description}
            </div>
            <div class='package-version'>
              ${suggestion.version}
            </div>
          </div>
        `;
        },
        empty: `<div class="message">No results.</div>`
      }
    }
  ])
  .on("autocomplete:selected", function (event, suggestion /*, dataset */) {
    var url = "https://cdnjs.cloudflare.com/ajax/libs/";
    url += suggestion.name + "/";
    url += suggestion.version + "/";
    url += suggestion.filename;

    alert(url);
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/algolia-autocomplete.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/algoliasearch.min.js