Skip to content

Commit 471fa0e

Browse files
brianreavisbrianreavis
committed
Added support for async data loading (ajax). Github / Rotten Tomatoes examples.
1 parent 1b60672 commit 471fa0e

8 files changed

+436
-51
lines changed

‎examples/github.html

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
3+
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
4+
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
5+
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
6+
<head>
7+
<meta charset="utf-8">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9+
<title>jQuery Selectize Demo</title>
10+
<meta name="description" content="">
11+
<meta name="viewport" content="width=device-width">
12+
<link rel="stylesheet" href="_normalize.css">
13+
<link rel="stylesheet" href="_stylesheet.css">
14+
<link rel="stylesheet" href="../jquery.selectize.css">
15+
<script src="_jquery.js"></script>
16+
<script src="../jquery.selectize.js"></script>
17+
<script src="_demos.js"></script>
18+
<style type="text/css">
19+
.selectize-control.repositories .selectize-dropdown > div {
20+
border-bottom: 1px solid rgba(0,0,0,0.05);
21+
}
22+
.selectize-control.repositories .selectize-dropdown .by {
23+
font-size: 11px;
24+
opacity: 0.8;
25+
}
26+
.selectize-control.repositories .selectize-dropdown .by::before {
27+
content: 'by ';
28+
}
29+
.selectize-control.repositories .selectize-dropdown .name {
30+
font-weight: bold;
31+
margin-right: 5px;
32+
}
33+
.selectize-control.repositories .selectize-dropdown .title {
34+
display: block;
35+
}
36+
.selectize-control.repositories .selectize-dropdown .description {
37+
font-size: 12px;
38+
display: block;
39+
color: #a0a0a0;
40+
white-space: nowrap;
41+
width: 100%;
42+
text-overflow: ellipsis;
43+
overflow: hidden;
44+
}
45+
.selectize-control.repositories .selectize-dropdown .meta {
46+
list-style: none;
47+
margin: 0;
48+
padding: 0;
49+
font-size: 10px;
50+
}
51+
.selectize-control.repositories .selectize-dropdown .meta li {
52+
margin: 0;
53+
padding: 0;
54+
display: inline;
55+
margin-right: 10px;
56+
}
57+
.selectize-control.repositories .selectize-dropdown .meta li span {
58+
font-weight: bold;
59+
}
60+
</style>
61+
</head>
62+
<body>
63+
<div id="wrapper">
64+
<h1>Selectize Demos</h1>
65+
<div class="demo">
66+
<h2>&lt;select&gt; (async)</h2>
67+
<p>This demo shows how to integrate third-party data, loaded asynchronously.</p>
68+
<div class="control-group">
69+
<label for="select-repo">Repository:</label>
70+
<select id="select-repo" placeholder="Pick a repository..."></select>
71+
</div>
72+
<script>
73+
// <select id="select-repo"></select>
74+
$('#select-repo').selectize({
75+
theme: 'repositories',
76+
valueField: 'url',
77+
labelField: 'name',
78+
searchField: 'name',
79+
options: [],
80+
create: false,
81+
render: {
82+
option: function(item) {
83+
return '<div>' +
84+
'<span class="title">' +
85+
'<span class="name">' + item.name + '</span>' +
86+
'<span class="by">' + item.username + '</span>' +
87+
'</span>' +
88+
'<span class="description">' + item.description + '</span>' +
89+
'<ul class="meta">' +
90+
'<li class="language">' + item.language + '</li>' +
91+
'<li class="watchers"><span>' + item.watchers + '</span> watchers</li>' +
92+
'<li class="forks"><span>' + item.forks + '</span> forks</li>' +
93+
'</ul>' +
94+
'</div>';
95+
}
96+
},
97+
score: function(search) {
98+
var score = this.getScoreFunction(search);
99+
return function(item) {
100+
return score(item) * (item.watchers + 1);
101+
};
102+
},
103+
load: function(query, callback) {
104+
if (!query.length) return;
105+
$.ajax({
106+
url: 'https://api.github.com/legacy/repos/search/' + encodeURIComponent(query),
107+
type: 'GET',
108+
error: function() {
109+
callback();
110+
},
111+
success: function(res) {
112+
callback(res.repositories.slice(0, 10));
113+
}
114+
});
115+
}
116+
});
117+
</script>
118+
</div>
119+
</div>
120+
</body>
121+
</html>

‎examples/movies.html

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
3+
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
4+
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
5+
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
6+
<head>
7+
<meta charset="utf-8">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9+
<title>jQuery Selectize Demo</title>
10+
<meta name="description" content="">
11+
<meta name="viewport" content="width=device-width">
12+
<link rel="stylesheet" href="_normalize.css">
13+
<link rel="stylesheet" href="_stylesheet.css">
14+
<link rel="stylesheet" href="../jquery.selectize.css">
15+
<script src="_jquery.js"></script>
16+
<script src="../jquery.selectize.js"></script>
17+
<script src="_demos.js"></script>
18+
<style type="text/css">
19+
.selectize-control.movies .selectize-dropdown > div {
20+
border-bottom: 1px solid rgba(0,0,0,0.05);
21+
height: 60px;
22+
position: relative;
23+
-webkit-box-sizing: content-box;
24+
box-sizing: content-box;
25+
padding: 10px 10px 10px 60px;
26+
}
27+
.selectize-control.movies .selectize-dropdown > div:last-child {
28+
border-bottom: 0 none;
29+
}
30+
.selectize-control.movies .selectize-dropdown .by {
31+
font-size: 11px;
32+
opacity: 0.8;
33+
}
34+
.selectize-control.movies .selectize-dropdown .by::before {
35+
content: 'by ';
36+
}
37+
.selectize-control.movies .selectize-dropdown .name {
38+
font-weight: bold;
39+
margin-right: 5px;
40+
}
41+
.selectize-control.movies .selectize-dropdown .title {
42+
display: block;
43+
}
44+
.selectize-control.movies .selectize-dropdown .description {
45+
font-size: 12px;
46+
display: block;
47+
color: #a0a0a0;
48+
white-space: nowrap;
49+
width: 100%;
50+
text-overflow: ellipsis;
51+
overflow: hidden;
52+
}
53+
.selectize-control.movies .selectize-dropdown .actors {
54+
font-size: 10px;
55+
display: block;
56+
color: #a0a0a0;
57+
}
58+
.selectize-control.movies .selectize-dropdown .actors span {
59+
color: #606060;
60+
}
61+
.selectize-control.movies .selectize-dropdown img {
62+
height: 60px;
63+
left: 10px;
64+
position: absolute;
65+
border-radius: 3px;
66+
background: rgba(0,0,0,0.04);
67+
}
68+
.selectize-control.movies .selectize-dropdown .meta {
69+
list-style: none;
70+
margin: 0;
71+
padding: 0;
72+
font-size: 10px;
73+
}
74+
.selectize-control.movies .selectize-dropdown .meta li {
75+
margin: 0;
76+
padding: 0;
77+
display: inline;
78+
margin-right: 10px;
79+
}
80+
.selectize-control.movies .selectize-dropdown .meta li span {
81+
font-weight: bold;
82+
}
83+
.selectize-control.movies .highlight {
84+
background: rgba(255,237,40,0.4);
85+
border-radius: 1px;
86+
}
87+
</style>
88+
</head>
89+
<body>
90+
<div id="wrapper">
91+
<h1>Selectize Demos</h1>
92+
<div class="demo">
93+
<h2>&lt;select&gt; (async)</h2>
94+
<p>This demo shows how to integrate third-party data, loaded asynchronously.</p>
95+
<div class="control-group">
96+
<label for="select-movie">Movie:</label>
97+
<select id="select-movie" placeholder="Find a movie..."></select>
98+
</div>
99+
<script>
100+
// <select id="select-movie"></select>
101+
$('#select-movie').selectize({
102+
theme: 'movies',
103+
valueField: 'title',
104+
labelField: 'title',
105+
searchField: 'title',
106+
options: [],
107+
create: false,
108+
render: {
109+
option: function(item) {
110+
var actors = [];
111+
for (var i = 0, n = item.abridged_cast.length; i < n; i++) {
112+
actors.push('<span>' + item.abridged_cast[i].name + '</span>');
113+
}
114+
115+
return '<div>' +
116+
'<img src="' + item.posters.thumbnail + '" alt="">' +
117+
'<span class="title">' +
118+
'<span class="name">' + item.title + '</span>' +
119+
'</span>' +
120+
'<span class="description">' + (item.synopsis || 'No synopsis available at this time.') + '</span>' +
121+
'<span class="actors">' + (actors.length ? 'Starring ' + actors.join(', ') : 'Actors unavailable') + '</span>' +
122+
'</div>';
123+
}
124+
},
125+
load: function(query, callback) {
126+
if (!query.length) return;
127+
$.ajax({
128+
url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',
129+
type: 'GET',
130+
dataType: 'jsonp',
131+
data: {
132+
q: query,
133+
page_limit: 10,
134+
apikey: '3qqmdwbuswut94jv4eua3j85'
135+
},
136+
error: function() {
137+
callback();
138+
},
139+
success: function(res) {
140+
console.log(res.movies);
141+
callback(res.movies);
142+
}
143+
});
144+
}
145+
});
146+
</script>
147+
</div>
148+
</div>
149+
</body>
150+
</html>

‎jquery.selectize.css

+3-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,8 @@
122122
-webkit-font-smoothing: antialiased;
123123
}
124124
.selectize-dropdown .highlight {
125-
font-weight: bold;
125+
background: rgba(255,237,40,0.4);
126+
border-radius: 1px;
126127
}
127128

128129
/**********************************************************
@@ -217,6 +218,7 @@
217218
}
218219
.selectize-dropdown > * {
219220
cursor: pointer;
221+
overflow: hidden;
220222
}
221223
.selectize-input, .selectize-dropdown {
222224
-webkit-box-sizing: border-box;

0 commit comments

Comments
 (0)