Permalink
Browse files

updated Github instant search example

  • Loading branch information...
1 parent efe7156 commit eeef08be5bfd7f039ed56a1000ce4e4278796b0c Lakshan Perera committed Feb 23, 2011
Showing with 42 additions and 16 deletions.
  1. +27 −7 demo/github_instant.html
  2. +15 −9 demo/index.html
View
@@ -21,7 +21,7 @@
}).promise();
},
resultsContainer: "div#results",
- resultFormatter: function(r){ return "<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>" },
+ 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>" },
minCharLimit: 0, delay: 200});
$("#search_field").bind({
@@ -32,7 +32,13 @@
$("div#results").html("Loading...");
},
+ noResults: function(ev){
+ $("div#results").html("Sorry! No results found");
+ ev.preventDefault();
+ },
+
//we don't need the default behaviour of following events
+ showResults: function(ev) {ev.preventDefault(); },
itemSelect: function(ev){ ev.preventDefault(); },
itemOver: function(ev){ ev.preventDefault(); },
itemOut: function(ev){ ev.preventDefault(); }
@@ -42,21 +48,35 @@
</script>
<style>
+ /* General styles */
+ body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
+ 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; }
+
+ div#header {margin-bottom: 20px;}
+ div#container {margin: 0 auto; width: 740px;}
+ input.phat_input { font-size: 150%; padding: 5px 10px; width: 500px; }
+
+ div#results {margin: 20px 0;}
+ div.result {border-bottom: 1px solid #E9E9E9; margin-bottom: 10px; padding-bottom: 5px;}
+ div.result h3 {margin:0 0 5px 0; padding: 0}
+ div.result p {margin:0; padding: 0}
+
ul li {list-style: none; cursor: pointer;}
- li.highlight {background-color: #c0c0c0;}
- ul { margin: 10px 0; padding: 5px; background-color: #aeaeae; }
+ li.highlight {background-color: #C1CE84;}
+ ul { margin: 10px 0; padding: 5px; background-color: #E3EBBC; }
</style>
</head>
<body>
- <div id="container">
- <div id="header"><h1>GitHub Instant</h1></div>
- <div id="wrapper">
+ <div id="wrapper">
+ <div id="header"><h2>GitHub Instant</h2></div>
+
+ <div id="container">
<div id="content">
<form>
- <input type="text" autocomplete="off" id="search_field" placeholder="Type here to start searching"/>
+ <input class="phat_input" texttype="text" autocomplete="off" id="search_field" placeholder="Type here to start searching"/>
</form>
<div id="results">
View
@@ -10,14 +10,15 @@
<script type="text/javascript">
$(function(){
//example 1
- $("#basic_autocomplete_field").smartAutoComplete({source: ['Apple', 'Banana', 'Orange', 'Mango'], forceSelect: true, minCharLimit: 0, delay: 200});
+ $("#basic_autocomplete_field").smartAutoComplete({source: ['Apple', 'Banana', 'Orange', 'Mango']});
//example 2
- $("#country_field").smartAutoComplete({source: "countries.json"});
+ $("#country_field").smartAutoComplete({source: "countries.json", forceSelect: true, minCharLimit: 0, maxResults: 5, delay: 200});
//example 3
- $("#textarea_autocomplete_field").smartAutoComplete({source: ['Apple', 'Banana', 'Orange', 'Mango']});
+ $("#textarea_autocomplete_field").smartAutoComplete({source: "countries.json", minCharLimit: 0, maxResults: 5, delay: 200 } );
$("#textarea_autocomplete_field").bind({
+
keyIn: function(ev){
var tag_list = ev.customData.query.split(",");
//pass the modified query to default event
@@ -43,6 +44,7 @@
ev.preventDefault();
},
+ //do nothing when there's no matching results
noMatch: function(ev){ ev.preventDefault(); }
});
@@ -87,8 +89,8 @@
div.form-container div.buttonrow { margin-left: 180px; }
ul li {list-style: none; cursor: pointer;}
- li.highlight {background-color: #c0c0c0;}
- ul { margin: 10px 0; padding: 5px; background-color: #aeaeae; }
+ li.highlight {background-color: #C1CE84;}
+ ul { margin: 10px 0; padding: 5px; background-color: #E3EBBC; }
</style>
@@ -98,36 +100,40 @@
<div id="wrapper">
<h2>Smart AutoComplete Samples</h2>
+ <p>Please check the source code of this page to learn how these examples were implemented</p>
+
<div class="form-container">
<form>
<fieldset>
<legend>Example 1</legend>
- <p>Most basic configuration, with source provided as an Array</p>
<div>
<label for="basic_autocomplete_field">Favorite Fruit</label>
<input type="text" autocomplete="off" id="basic_autocomplete_field"/>
</div>
+
+ <p>Most basic configuration, with source provided as an Array</p>
</fieldset>
<fieldset>
<legend>Example 2</legend>
- <p>Similar configuration to example 1, but with a URL as the source</p>
<div>
<label for="country_field">Country</label>
<input type="text" autocomplete="off" id="country_field"/>
</div>
+ <p>This widget loads the source list via AJAX from the given URL as the source. Also, <em>forceSelect</em> option is enforced, <em>maxResults</em> is set to 5 and there's a <em>delay</em> of 300ms between requests.</p>
</fieldset>
<fieldset>
<legend>Example 3</legend>
- <p>Comma-seperated list of values, with auto-compeltion.</p>
<div>
- <label for="textarea_autocomplete_field">Favorite Fruits</label>
+ <label for="textarea_autocomplete_field">Favorite Countries</label>
<textarea autocomplete="off" id="textarea_autocomplete_field"></textarea>
+ <p class='note'>You can enter mulitple values seperated by comma</p>
</div>
+ <p>This widget implements a Comma-seperated list, with auto-compeltion. To achieve this we have bind handlers to custom events emitted by the plugin.</p>
</fieldset>
</form>
</div>

0 comments on commit eeef08b

Please sign in to comment.