Thursday, April 30, 2015

Update twitter typeahead to 0.11

Overall, I think the bloodhound/typeahead's API gets much better from 0.10 to 0.11. The limit option was moved from bloodhound to typeahead because it is more related to display than indexing and query. The DOM element classes were changed, and I update the styles after reading the www.js file. The javascript and CSS code is on gist.

travelerGlobal.usernames.initialize();
$('#username').typeahead({
minLength: 1,
highlight: true,
hint: true
}, {
name: 'usernames',
display: 'displayName',
limit: 20,
source: travelerGlobal.usernames
});
view raw page.js hosted with ❤ by GitHub
/* twitter typeahead 0.11 styles */
.twitter-typeahead .tt-query, .twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.tt-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
view raw typeahead.css hosted with ❤ by GitHub
travelerGlobal.usernames = new Bloodhound({
datumTokenizer: function (user) {
return Bloodhound.tokenizers.whitespace(user.displayName);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function (user) {
return user.displayName;
},
prefetch: {
url: '/adusernames',
cacheKey: 'adusernames'
}
});
view raw usernames.js hosted with ❤ by GitHub