basti1012.bplaced.net

Suche nach Scripte die auf den CDN Server gespeichert sind

Code

                                    
                                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/bloodhound.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/typeahead.js"></script>
<style>
  body {
  font-family: "Lato", sans-serif;
}
.typeahead,
.tt-query,
.tt-hint {
  padding: 8px 12px;
  border: 2px solid #ccc;
  outline: none;
}
.typeahead:focus {
  border: 2px solid #0097cf;
}
.tt-suggestion {
  color: white;
  margin: 0;
  padding: 8px;
  font-size: 11px;
  white-space: nowrap !important;
  text-overflow: ellipsis;
  overflow: hidden;
}
.tt-suggestion small {
  display: block;
  margin: 2px 0;
  color: #999;
}
.tt-cursor {
  background: blue;
}
.tt-menu {
  background: linear-gradient(#313131, #131313);
  color: white;
}
.empty-typeahead-message {
  padding: 15px;
  color: white;
}
label {
  display: block;
  padding: 0.25rem;
}
body > div,
h1 {
  padding: 1rem;
}
</style>
<h1>Search libs from CDNjs API</h1>
<div>
  <label for="js">Search JavaScript Libraries</label>
  <input id="js"type="text" class="typeahead typeahead-js">
</div>
<div>
  <label for="css">Search CSS Libraries</label>
  <input id="css" type="text" class="typeahead typeahead-css">
</div>
<script>
var CDN_js = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: "https://api.cdnjs.com/libraries?fields=keywords&search=%QUERY",
    wildcard: '%QUERY',
    filter: function(response) {   
      var filteredJavaScriptResults = _.filter(response.results, function(item) {
        if (/.js$/.test(item.latest)) {
          return item.latest;
        } else {
          return false;
        }
      })
      return filteredJavaScriptResults;
    }
  }
});

var CDN_css = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: "https://api.cdnjs.com/libraries?fields=keywords&search=%QUERY",
    wildcard: '%QUERY',
    filter: function(response) {   
      var filteredJavaScriptResults = _.filter(response.results, function(item) {
        if (/.css$/.test(item.latest)) {
          return item.latest;
        } else {
          return 0;
        }
      })
      return filteredJavaScriptResults;
    }
  }
});

$('.typeahead-js').typeahead({
  minLength: 3,
  highlight: true
}, {
  name: 'name',
  source: CDN_js,
  templates: {
    // header: '<h3>JavaScript Search Results</h3>',
    suggestion: function(item) {
      return '<p>' + item.name + '<small>' + item.latest + '</small>' + '</p>';
    }
  },
  display: function(item) {
    return item.latest;
  }
});

$('.typeahead-css').typeahead({
  minLength: 3,
  highlight: true
}, {
  name: 'name',
  source: CDN_css,
  templates: {
    suggestion: function(item) {
      return '<p>' + item.name + '<small>' + item.latest + '</small>' + '</p>';
    }
  },
  display: function(item) {
    return item.latest;
  }
});
</script>