Permalink
Browse files

Update documentation & examples

  • Loading branch information...
1 parent 0d6e78f commit 090b4683269dc89b5a05eea029f0008d75857eea @kneath committed Sep 24, 2008
Showing with 54 additions and 4 deletions.
  1. +15 −1 README.markdown
  2. +8 −0 index.html
  3. +31 −3 styles.css
View
@@ -14,7 +14,21 @@ The Javascript is 100% unobtrusive and will fall back to a `<select>` tag for us
## How to use
-Usage is simple. Just call `new SelectAutoCompleter(element)` on any `<select>` tag you would like to replace. Your server will receive the same response as if the `<select>` was not replaced, so no backend work is needed.
+Usage is simple. Just call `new SelectAutoCompleter(element, options)` on any `<select>` tag you would like to replace. Your server will receive the same response as if the `<select>` was not replaced, so no backend work is needed.
+
+Any class names on the `<select>` element will be carried over to the `<input>` that replaces it as well as the `<ul>` containing the results.
+
+### Options
+
+* **cutoffScore** - A decimal between 0 and 1 determining what Quicksilver score to cut off results for. Default is 0.1. Use higher values to show more relevant, but less results.
+* **template** - A string describing the template for the drop down list item. Default variables available: rawText, highlightedText. Default value is "{highlightedText}" Use in conjunction with templateAttributes to build rich autocomplete lists.
+* **templateAttributes** - An array of attributes on the `<option>` element SelectAutoCompleter should use for it's template
+
+### Events
+
+There are two events mixed in - onFocus (when the autocompleter takes focus) and onBlur (when the autocompleter loses focus)
+
+### Example
See `index.html` for a working example.
View
@@ -12,6 +12,7 @@
</head>
<body>
+ <h2>Simple Example</h2>
<select id="autocomplete">
<option value="NULL">Select a name...</option>
<option value="0">Kamren Boyer</option>
@@ -69,6 +70,9 @@
new SelectAutoCompleter('autocomplete');
</script>
+ <pre><code>new SelectAutoCompleter('autocomplete');</code></pre>
+
+ <h2>Example with rich list</h2>
<select id="autocomplete-users" class="userlist">
<option value="0" email="felicia@lakin.uk" avatar="http://www.gravatar.com/avatar/d3de0f5b65c85339cbe08f6fbbd388dc?s=16&d=wavatar">Meda Ankunding</option>
<option value="1" email="mauricio.becker@christiansengislason.info" avatar="http://www.gravatar.com/avatar/ec31a8d739174121e11c0f32405c91a6?s=16&d=wavatar">Vance Purdy</option>
@@ -127,5 +131,9 @@
template: '<img src="{attrAvatar}" alt="{rawText}" class="avatar" /> <h5>{highlightedText}</h5> <p>{attrEmail}</p>'
});
</script>
+<pre><code>new SelectAutoCompleter('autocomplete-users', {
+ templateAttributes: ["email", "avatar"],
+ template: '&lt;img src=&quot;{attrAvatar}&quot; alt=&quot;{rawText}&quot; class=&quot;avatar&quot; /&gt; &lt;h5&gt;{highlightedText}&lt;/h5&gt; &lt;p&gt;{attrEmail}&lt;/p&gt;'
+});</code>
</body>
</html>
View
@@ -27,14 +27,20 @@ a img{ border:none; }
.clearfix {display: block;}
body{
- padding:100px;
+ padding:50px 100px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:12px;
line-height:1.6;
color:#444;
background:#fff;
}
+h2{
+ margin:50px 0 10px 0;
+ font-size:16px;
+ color:#000;
+}
+
/* @end */
@@ -43,7 +49,7 @@ body{
------------------------------------------------------------------------------------*/
input.textfield{
- width:175px;
+ width:275px;
padding-top:3px;
padding-bottom:3px;
padding-left:3px;
@@ -63,9 +69,10 @@ input.textfield{
top:18px;
left:0;
margin:0;
- width:178px;
+ width:278px;
border:1px solid #bbb;
background:#fff;
+ z-index:100;
}
.autocomplete ul.auto-dropdown li{
margin:0;
@@ -86,4 +93,25 @@ input.textfield{
color:#000;
}
+
+ul.userlist .avatar{
+ margin-left:-6px;
+ width:28px;
+ height:28px;
+ float:left;
+ border-right:1px solid #ddd;
+}
+ul.userlist li{
+ line-height:14px;
+}
+ul.userlist h5{
+ margin:0 0 0 30px;
+ font-weight:normal;
+ font-size:11px;
+}
+ul.userlist p{
+ margin:0 0 0 30px;
+ font-size:10px;
+ color:#999;
+}
/* @end */

0 comments on commit 090b468

Please sign in to comment.