Search libs from CDNjs API

Suche nach Scripte die auf den CDN Server gespeichert sind

Der hier verwendete 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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!