forked from vgrichina/topsy_instant
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (93 loc) · 4.13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<html>
<head>
<title>Topsy Instant – realtime search in Twitter, based on Topsy</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="requestForm">
<p class="intro">
Type to search web pages popular on Twitter.
</p>
<input type="text" id="query">
</div>
<div class="searchResults">
<div class="item" style="display: none;">
<a class="headerLink" href="http://example.com">Example link</a>
<div class="url">example.com</div>
<div class="text">This is some example text</div>
<div class="info">
<span class="user">
<img src="http://a1.twimg.com/profile_images/1124040897/at-twitter_bigger.png">
<a href="http://topsy.com/twitter/twitter">twitter</a>
</span>
<span class="date">
3 days ago
</span>
<span class="tweets">
<a href="http://topsy.com/example.com">123 more</a>
</span>
</div>
</div>
</div>
<div class="footer">
<p>
Developed by <a href="http://github.com/vgrichina">Vladimir Grichina</a> from
<a href="http://www.componentix.com/">Componentix</a>.
Get us handle your project – <a href="http://www.componentix.com/requestQuote">request quote</a>.
</p>
<p>
See <a href="http://github.com/vgrichina/topsy_instant">Topsy Instant source code</a> at github.
</p>
<p>
Search is powered by <a href="http://topsy.com">Topsy</a>
</p>
</div>
<script>
var lastQuery = "";
function search(query) {
// Save last query so that it is possible to check response later
lastQuery = query;
$.getJSON("http://otter.topsy.com/search.js?q=" + query + "&callback=?", function(data) {
// Check if received result is really for the last query
if (data.request.parameters.q != lastQuery) {
return;
}
// Clear search results
$(".searchResults .item:visible").remove();
// Loop through all received items
$.each(data.response.list, function(i, item) {
// Create item element from template
var template = $(".searchResults .item:first-child");
var itemElement = template.clone().appendTo(".searchResults");
// Populate item element
itemElement.find(".headerLink").attr("href", item.url);
itemElement.find(".headerLink").text(item.title);
itemElement.find(".url").text(item.url);
itemElement.find(".text").html(item.highlight);
itemElement.find(".user img").attr("src", item.topsy_author_img);
itemElement.find(".user a").attr("href", item.topsy_author_url);
itemElement.find(".user a").text(item.trackback_author_nick);
itemElement.find(".date").text(new Date(item.trackback_date * 1000).toDateString());
itemElement.find(".tweets a").text(item.trackback_total + " more");
itemElement.find(".tweets a").attr(item.topsy_trackback_url);
// Show item element
itemElement.show();
});
});
}
// Handle keypresses in query field
$("#query").keyup(function() {
// Executing code with timeout, so that field value is already updated
setTimeout(function() {
// Get current query
var query = $("#query").val();
// Search current query if it's non-empty and not the same as previous
if (query.length > 0 && query != lastQuery) {
search(query);
}
}, 100);
});
</script>
</body>
</html>