Before you finished reading, the data was loaded, indexed, and ready for quering.
This is a very basic example of integrating hummingbird.js with Twitter Typeahead ui library.
See more about customizing the display style of Twitter Typeahead here: http://twitter.github.io/typeahead.js/.
Sample Code:
<script src="jquery-1.11.0.min.js"/>
<script src="../../hummingbird.js" type="text/javascript" charset="utf-8"/>
<script src="typeahead.jquery.js" type="text/javascript" charset="utf-8"/>
<script type="text/javascript" charset="utf-8"/>
var idx
var twitOpts = {hint: true, highlight: false, minLength: 1}
var dataSource = {name: 'countries', displayKey: 'name', source: searchText}
$(document).ready(function () {
$.ajaxSetup({ cache: false })
$("#searchTerm").typeahead(twitOpts, dataSource).focus();
console.time("load")
var variants = {
'great britain': ['united kingdom', 'britain', 'uk', 'u.k.', 'england'],
'britain':['united kingdom','great britain','uk','england'],
'united kingdom':['britain','great britain','uk','england'],
'uk':['united kingdom','britain','great britain','england'],
'england':['united kingdom','britain','great britain','uk'],
'United States': ['america', 'usa'],
'usa': ['United States', 'america'],
'america': ['united states', 'usa', 'america'],
'russia': ['russian federation', 'soviet union', 'ussr'],
'russian federation': ['russia', 'soviet union', 'ussr'],
'ussr': ['russian federation', 'soviet union', 'russia'],
'soviet union': ['russian federation', 'ussr', 'russia']
};
idx = new hummingbird.Index(variants);
//idx.tokenizer = new hummingbird.tokenizer(2,4)
hummingbird.loggingOn = true;
$.getJSON('../raw-countries.json')
.success(function (rawData) {
rawData.forEach(function (item){
idx.add({id:item.numeric_code, name:item.country, lat:item.latitude_average, long:item.longitude_average});
});
});
console.timeEnd("load");
});
function searchText(query, cb) {
var searchTerm = $("#searchTerm").val().trim();
hbOpts = {'boostPrefix': false}
console.time('search');
idx.search(query, cb, hbOpts);
console.timeEnd('search');
}
</script>
<style type="text/css" media="screen">
body {
background-color: #FFFFFF;
color: #666666;
font-family: 'Helvetica Neue';
font-size: 16px;
}
input {
width: 300px;
font-size: 1.4em;
max-height: 50px;
line-height: 30px;
overflow-y: auto;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
border-radius: 8px;
outline: none;
padding: 8px 12px;
}
.multiple-datasets {
margin: 0 20px 5px 20px;
padding: 3px 0;
border-bottom: 1px solid #ccc;
}
.tt-dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
z-index: 100;
display: none;
right: auto;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-dataset-countries {
display: block;
margin: 0 20px 5px 20px;
padding: 3px 0;
border-bottom: 1px solid #ccc;
}
</style>
|