Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 87 lines (70 sloc) 3.414 kb
60d51b1 more improvements to plugin and two new examples
Lakshan Perera authored
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>GitHub Instant</title>
5 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
6
7 <link media="screen" type="text/css" href="stylesheets/application.css" rel="stylesheet">
8 <link media="screen" type="text/css" href="stylesheets/smooth_theme.css" rel="stylesheet">
9
26a1eaa Lakshan Perera Use jQuery 1.10.2 for demos and tests.
authored
10 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
60d51b1 more improvements to plugin and two new examples
Lakshan Perera authored
11 <script type="text/javascript" src="../jquery.smart_autocomplete.js"></script>
12
13 <script type="text/javascript">
14 $(function(){
15 $("#search_field").smartAutoComplete({
16 filter: function(term){
17 return $.Deferred(function(dfd){
18 $.getJSON("http://github.com/api/v2/json/repos/search/" + term + "?callback=?").success( function(data){
26a1eaa Lakshan Perera Use jQuery 1.10.2 for demos and tests.
authored
19 dfd.resolve( $.map(data.repositories, function(r){ return r; }) );
20 });
21 }).promise();
60d51b1 more improvements to plugin and two new examples
Lakshan Perera authored
22 },
23 resultsContainer: "div#results",
eeef08b updated Github instant search example
Lakshan Perera authored
24 resultFormatter: function(r){ return "<div class='result'><h3><a href='" + r.url + "'>" + r.name + "</a> (" + r.language + ")</h3><p>" + r.description + "</p><div class='details'><span>Owner: " + r.owner + "</span> | <span>Forks: " + r.forks + "</span> | <span>Watchers: " + r.watchers + "</span></div></div>" },
60d51b1 more improvements to plugin and two new examples
Lakshan Perera authored
25 minCharLimit: 0, delay: 200});
26
27 $("#search_field").bind({
28 keyIn: function(){
29 //clear exisiting results
30 $(this).smartAutoComplete().clearResults();
31 $("div#results").html("Loading...");
32 },
33
eeef08b updated Github instant search example
Lakshan Perera authored
34 noResults: function(ev){
35 $("div#results").html("Sorry! No results found");
36 ev.preventDefault();
37 },
38
60d51b1 more improvements to plugin and two new examples
Lakshan Perera authored
39 //we don't need the default behaviour of following events
eeef08b updated Github instant search example
Lakshan Perera authored
40 showResults: function(ev) {ev.preventDefault(); },
60d51b1 more improvements to plugin and two new examples
Lakshan Perera authored
41 itemSelect: function(ev){ ev.preventDefault(); },
1e9b465 Lakshan Perera updated the demo for event rename
authored
42 itemFocus: function(ev){ ev.preventDefault(); },
43 itemUnfocus: function(ev){ ev.preventDefault(); }
60d51b1 more improvements to plugin and two new examples
Lakshan Perera authored
44
45 });
46 });
47 </script>
48
49 <style>
eeef08b updated Github instant search example
Lakshan Perera authored
50 /* General styles */
51 body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
52 h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
53
54 div#header {margin-bottom: 20px;}
55 div#container {margin: 0 auto; width: 740px;}
620d1fc few more style updates in github instant search demo
Lakshan Perera authored
56 div#container form {margin: 0 auto; width: 700px;}
57 input.phat_input { font-size: 150%; padding: 5px 10px; width: 700px }
eeef08b updated Github instant search example
Lakshan Perera authored
58
620d1fc few more style updates in github instant search demo
Lakshan Perera authored
59 div#results {margin: 20px auto; width: 700px;}
eeef08b updated Github instant search example
Lakshan Perera authored
60 div.result {border-bottom: 1px solid #E9E9E9; margin-bottom: 10px; padding-bottom: 5px;}
61 div.result h3 {margin:0 0 5px 0; padding: 0}
62 div.result p {margin:0; padding: 0}
63
60d51b1 more improvements to plugin and two new examples
Lakshan Perera authored
64 ul li {list-style: none; cursor: pointer;}
eeef08b updated Github instant search example
Lakshan Perera authored
65 li.highlight {background-color: #C1CE84;}
66 ul { margin: 10px 0; padding: 5px; background-color: #E3EBBC; }
60d51b1 more improvements to plugin and two new examples
Lakshan Perera authored
67
68 </style>
69
70 </head>
71
72 <body>
eeef08b updated Github instant search example
Lakshan Perera authored
73 <div id="wrapper">
74 <div id="header"><h2>GitHub Instant</h2></div>
75
76 <div id="container">
620d1fc few more style updates in github instant search demo
Lakshan Perera authored
77 <form>
78 <input class="phat_input" texttype="text" autocomplete="off" id="search_field" placeholder="Type here to start searching"/>
79 </form>
80 <div id="results">
60d51b1 more improvements to plugin and two new examples
Lakshan Perera authored
81
82 </div>
83 </div>
84 </div>
85 </body>
86 </html>
Something went wrong with that request. Please try again.