cdnjs Typeahead Search

cdnjs-typeahead-search.markdown

cdnjs Typeahead Search

Simple example of how to implement Twitter's typeahead.js to load library data from cdnjs. It includes functionality that runs on select and change events as well as error handling.

A Pen by Mark Hillard on CodePen.

License.

index.html

<h1>cdnjs Typeahead Search</h1>
<div id="cdn-search">
    <input class="query" type="text" placeholder="Search">
    <p class="url"></p>
</div>

script.js

$(document).ready(function () {
    var typeahead = $('#cdn-search .query');
    
    $.get('https://api.cdnjs.com/libraries').done(function (data) {
        var searchData = data.results;
        var search = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            local: searchData
        });
        
        typeahead.typeahead(null, {
            display: 'name',
            name: 'search',
            source: search,
            templates: {
                empty: function () {
                    return '<div class="no-match">unable to match query</div>';
                },
                suggestion: function (data) {
                    return '<p>' + data.name + '</p>';
                }
            }
        }).on('typeahead:select', function (e, datum) {
            var latest = datum.latest;
            $('.url').text(latest).show().delay(3000).fadeOut(300);
            clearSearch();
        }).on('typeahead:change', function () {
            clearSearch();
        });
    }).fail(function () {
        console.log("error getting cdnjs libraries");
    });
    
    // clear typeahead search and close results list
    function clearSearch() {
        typeahead.typeahead('val', '');
        typeahead.typeahead('close');
    }
});

scripts

<script src="//twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

style.css

/* Global Styles */

@import url("//fonts.googleapis.com/css?family=Droid+Sans:400,700");

html,body {
background-color:#0e0f13;
color:#fff;
font-family:"Droid Sans", arial, sans-serif;
line-height:1.5;
text-align:center;
}

input::-moz-focus-inner { border:0; padding:0; }

*,::before,::after { box-sizing:border-box; }
:focus { outline:none; }

h1 {
color:#ddd;
font-size:2.3rem;
margin:50px 0;
}


/* Typeahead Search */

#cdn-search {
display:inline-block;
}

#cdn-search .query {
appearance:none;
background:none;
background-color:#6d8a88;
border:none;
border-bottom:1px solid #0e0f13;
color:#282a36;
display:block;
font-family:"Droid Sans", arial, sans-serif;
font-size:1rem;
font-weight:700;
padding:.75rem;
width:250px;
}

#cdnjs-search .query::-moz-placeholder { color:#48565c; opacity:1; }
#cdnjs-search .query:-ms-input-placeholder { color:#48565c; opacity:1; }
#cdnjs-search .query::-webkit-input-placeholder { color:#48565c; opacity:1; }

#cdn-search .url {
display:none;
margin-top:50px;
}

.tt-hint {
color:#48565c !important;
}

.tt-menu {
text-align:left;
width:100%;
}

.tt-menu .no-match {
background-color:#6d8a88;
color:#282a36;
padding:.75rem;
}

.tt-suggestion {
background-color:#6d8a88;
color:#282a36;
cursor:pointer;
font-weight:700;
padding:.75rem;
}

.tt-cursor,
.tt-suggestion:hover {
background-color:#282a36;
color:#6d8a88;
}