Skip to content

Instantly share code, notes, and snippets.

@zjlgdx

zjlgdx/demo.html

Created August 28, 2015 07:40
Show Gist options
  • Save zjlgdx/cb5c2610ee0a0bfc96f4 to your computer and use it in GitHub Desktop.
Save zjlgdx/cb5c2610ee0a0bfc96f4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
demo.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/normalize.min.css" rel="stylesheet" />
<link href="~/Content/twitterdemo.css" rel="stylesheet" />
</head>
<body>
<div class="masthead">
<div class="Demo">
<form action="https://twitter.com/search" method="get">
<input name="mode" value="users" type="hidden">
<div class="Typeahead Typeahead--twitterUsers">
<div class="u-posRelative">
<input dir="ltr" class="Typeahead-hint" tabindex="-1" readonly="readonly" type="text">
<input class="Typeahead-input tt-input" id="demo-input" name="q" placeholder="Search Twitter users..." type="text">
<img class="Typeahead-spinner" src="/images/spinner.gif">
</div>
<div class="Typeahead-menu"><div class="tt-dataset tt-dataset-0"></div></div>
</div>
<button class="u-hidden" type="submit">blah</button>
</form>
</div>
</div>
<script id="result-template" type="text/x-handlebars-template">
<div class="ProfileCard u-cf">
<img class="ProfileCard-avatar" src="{{profile_image_url_https}}">
<div class="ProfileCard-details">
<div class="ProfileCard-realName">{{name}}</div>
<div class="ProfileCard-screenName">@{{screen_name}}</div>
<div class="ProfileCard-description">{{description}}</div>
</div>
<div class="ProfileCard-stats">
<div class="ProfileCard-stat"><span class="ProfileCard-stat-label">Tweets:</span> {{statuses_count}}</div>
<div class="ProfileCard-stat"><span class="ProfileCard-stat-label">Following:</span> {{friends_count}}</div>
<div class="ProfileCard-stat"><span class="ProfileCard-stat-label">Followers:</span> {{followers_count}}</div>
</div>
</div>
</script>
<script id="empty-template" type="text/x-handlebars-template">
<div class="EmptyMessage">Your search turned up 0 results. This most likely means the backend is down, yikes!</div>
</script>
<script src="~/Scripts/handlebars.min.js"></script>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.xdomainrequest.min.js"></script>
<script src="~/Scripts/typeahead.bundle.min.js"></script>
<script src="~/Scripts/custom/twitterdemo.js"></script>
</body>
</html>
Raw
normalize.min.css
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
Raw
twitterdemo.css
/* scaffolding */
/* ----------- */
html,
body {
height: 100%;
}
html {
overflow-y: scroll;
*overflow-x: hidden;
}
.sticky-footer-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
.sticky-footer-push,
.footer {
height: 60px;
}
.container {
max-width: 700px;
margin: 0 auto;
}
/* base styles */
/* ----------- */
html {
background-color: #f2f9ff;
font: normal normal normal 18px/1.2 "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
color: #292f33;
}
a {
color: #03739c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0 0 10px 0;
}
input[type=text]::-ms-clear {
display: none;
}
/* site theme */
/* ---------- */
.masthead,
.footer {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.twitter-logo {
width: 72px;
height: 72px;
margin: 0;
vertical-align: middle;
}
.title {
margin: 20px 0 0 0;
font-size: 64px;
}
.tagline {
margin: 20px 0 0 0;
font-size: 20px;
color: #444;
}
.btn-download {
position: relative;
display: inline-block;
*display: inline;
*zoom: 1;
margin: 150px 0 0 0;
padding: 10px 20px;
color: #fff;
font: inherit;
font-size: 32px;
line-height: 38px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #0097cf;
background-image: -moz-linear-gradient(top, #04a2dd, #03739c);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04a2dd), to(#03739c));
background-image: -webkit-linear-gradient(top, #04a2dd, #03739c);
background-image: -o-linear-gradient(top, #04a2dd, #03739c);
background-image: linear-gradient(to bottom, #04a2dd, #03739c);
background-repeat: repeat-x;
border: 1px solid #024e6a;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 2px 5px -2px #111;
-moz-box-shadow: 0 2px 5px -2px #111;
box-shadow: 0 2px 5px -2px #111;
}
.btn-download:hover {
background-color: #04a2dd;
background-image: none;
}
.btn-download:active {
background-color: #03739c;
background-image: none;
}
.btn:hover,
.btn:focus,
.btn:active {
text-decoration: none;
}
.btn::-moz-focus-inner {
border: 0;
padding: 0;
}
.social {
margin: 80px 0 0 0;
}
.social-btn {
padding: 5px 8px;
}
.links {
margin: 10px 0 0 0;
display: block;
padding: 0;
list-style: none;
}
.links a {
font-size: 16px;
color: #999;
}
.footer {
font-size: 12px;
}
.Typeahead *,
.Typeahead *:before,
.Typeahead *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Utilities */
.u-cf:before,
.u-cf:after {
content: " ";
display: table;
}
.u-cf:after {
clear: both;
}
.u-hidden {
display: none !important;
}
.u-posRelative {
position: relative;
}
/* Typeahead */
.Typeahead {
position: relative;
*z-index: 1;
width: 500px;
margin: 50px auto 0 auto;
padding: 15px;
text-align: left;
background-color: #0097cf;
background-image: -moz-linear-gradient(top, #04a2dd, #03739c);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04a2dd), to(#03739c));
background-image: -webkit-linear-gradient(top, #04a2dd, #03739c);
background-image: -o-linear-gradient(top, #04a2dd, #03739c);
background-image: linear-gradient(top, #04a2dd, #03739c);
background-repeat: repeat-x;
border: 1px solid #024e6a;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 2px #111;
-moz-box-shadow: 0 0 2px #111;
box-shadow: 0 0 2px #111;
}
.Typeahead-spinner {
position: absolute;
top: 7px;
right: 7px;
display: none;
width: 28px;
height: 28px;
}
.Typeahead-hint,
.Typeahead-input {
width: 100%;
padding: 5px 8px;
font-size: 24px;
line-height: 30px;
border: 1px solid #024e6a;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.Typeahead-hint {
position: absolute;
top: 0;
left: 0;
color: #ccd6dd;
opacity: 1;
}
.Typeahead-input {
position: relative;
background-color: transparent;
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
outline: none;
}
.Typeahead-menu {
position: absolute;
top: 95%;
left: 2.5%;
z-index: 100;
display: none;
width: 95%;
margin-bottom: 20px;
overflow: hidden;
background-color: #fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
box-shadow: 0px 0px 0px 1px green;
-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);
}
.Typeahead-menu.is-open {
display: block;
}
.Typeahead-selectable {
cursor: pointer;
}
.Typeahead-selectable + .Typeahead-selectable {
border-top: 1px solid #ccd6dd;
}
/* ProfileCard */
.ProfileCard {
position: relative;
padding: 8px;
}
.ProfileCard-avatar {
position: absolute;
top: 8px;
left: 8px;
width: 52px;
height: 52px;
border: 2px solid #ccd6dd;
border-radius: 5px;
}
.ProfileCard:hover .ProfileCard-avatar {
border-color: #f5f8fa;
}
.ProfileCard-details {
min-height: 60px;
padding-left: 60px;
}
.ProfileCard-realName,
.ProfileCard-screenName {
display: inline-block;
}
.ProfileCard-realName {
font-weight: 700;
}
.ProfileCard-screenName {
color: #8899a6;
}
.ProfileCard-description {
margin-top: 5px;
font-size: 14px;
line-height: 18px;
}
.ProfileCard-stats {
float: right;
text-align: right;
}
.ProfileCard-stat {
display: inline-block;
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
}
.ProfileCard-stat-label {
color: #8899a6;
font-weight: 500;
}
.ProfileCard-stat + .ProfileCard-stat {
margin-left: 5px;
}
.ProfileCard:hover,
.ProfileCard.is-active {
color: #fff;
background: #55acee;
}
.ProfileCard:hover .ProfileCard-screenName,
.ProfileCard:hover .ProfileCard-stat-label,
.ProfileCard.is-active .ProfileCard-screenName,
.ProfileCard.is-active .ProfileCard-stat-label {
color: #fff;
}
/* EmptyMessage */
.EmptyMessage {
position: relative;
padding: 10px;
font-size: 24px;
line-height: 30px;
text-align: center;
}
Raw
twitterdemo.js
$(document).ready(function () {
var engine, remoteHost, template, empty;
$.support.cors = true;
remoteHost = 'https://typeahead-js-twitter-api-proxy.herokuapp.com';
template = Handlebars.compile($("#result-template").html());
empty = Handlebars.compile($("#empty-template").html());
engine = new Bloodhound({
identify: function (o) { return o.id_str; },
queryTokenizer: Bloodhound.tokenizers.whitespace,
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name', 'screen_name'),
dupDetector: function (a, b) { return a.id_str === b.id_str; },
prefetch: remoteHost + '/demo/prefetch',
remote: {
url: remoteHost + '/demo/search?q=%QUERY',
wildcard: '%QUERY'
}
});
// ensure default users are read on initialization
engine.get('1090217586', '58502284', '10273252', '24477185')
function engineWithDefaults(q, sync, async) {
if (q === '') {
sync(engine.get('1090217586', '58502284', '10273252', '24477185'));
async([]);
}
else {
engine.search(q, sync, async);
}
}
$('#demo-input').typeahead({
hint: $('.Typeahead-hint'),
menu: $('.Typeahead-menu'),
minLength: 0,
classNames: {
open: 'is-open',
empty: 'is-empty',
cursor: 'is-active',
suggestion: 'Typeahead-suggestion',
selectable: 'Typeahead-selectable'
}
}, {
source: engineWithDefaults,
displayKey: 'screen_name',
templates: {
suggestion: template,
empty: empty
}
})
.on('typeahead:asyncrequest', function () {
$('.Typeahead-spinner').show();
})
.on('typeahead:asynccancel typeahead:asyncreceive', function () {
$('.Typeahead-spinner').hide();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment