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>