-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathtest.html
126 lines (126 loc) · 5.47 KB
/
test.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery Delicious™ style auto-complete</title>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="yummi.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.sizes.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.yummi.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#fruits').yummi();
})
</script>
</head>
<body>
<div id="wrap">
<div id="logo">
Yum →
<span class="faded">mi</span>
</div>
<h1>jQuery Delicious™ style auto-completion.</h1>
<p>
<a href="http://cloud.github.com/downloads/incite/jquery-yummi/jquery-yummi.zip">Download link</a>, or
<a href="http://github.com/incite/jquery-yummi">browse the code on Github</a>.
</p>
<h2>Why yet another auto-complete plugin?</h2>
<p>
To my knowledge, there's not a single jQuery based auto-completion plugin that can
<strong>auto-complete any word in a text field no matter what the position is</strong>.
While we're at it, apparently not even <a href="http://delicious.com">Delicious'
web interface</a> auto-complete seems to do it. It only operates on the last word.
Also, having to install <a href="http://developer.yahoo.com/yui/">YUI</a> to be able
to use it isn't an option as far as I'm concerned.
</p>
<p>
Other jQuery auto-complete plugins I found seem to rely on the current value in the
text field. That's less than adequate, as in circumstances where you're dealing
with a set of values (e.g.: auto-completion for tags though a single text field),
you won't be able to use it past the first tag you enter.
</p>
<h2>Demo:</h2>
<form action="#" method="post" accept-charset="utf-8">
<p>
<label>Fruits (as usual)</label>
</p>
<div class="input">
<input type="text" name="fruits" id="fruits" />
</div>
<p class="buttons">
<button type="button">Submit (or not)</button>
<div class="clear"></div>
</p>
</form>
<h2>Usage:</h2>
<p>Simply invoke <strong>yummi()</strong> on a selector that points to a text field, like so:</p>
<code>
$('form :text:first').yummi({collection: ['keywords', 'for', 'auto', 'completion']})
</code>
<p>
You can update the collection that's being used by an element by invoking <strong>yummi()</strong>
again on the same element.
</p>
<h2>Why no AJAX?!</h2>
<p>
I believe in unobtrusiveness. Adding Ajax to a plugin such as this one binds you to a behavior that might
not be exactly what you're looking for. So I chose to simply let you pass on a collection to an element,
and you're free to pull said collection from anywhere in any way you want to, even from the DOM itself.
</p>
<p>
<strong>However</strong>, if you'd like to have it, here's an example on how you could do it.
</p>
<code>
$.get('/fruits.json', '', function(myfruits) { $('form :text:first').yummi({collection: myfruits}) }, 'json')
</code>
<p>
The example above assumes you're getting JSON back as the response type, and we're looking at a clean
array of strings coming from the url "/fruits.json".
</p>
<h2>Installation:</h2>
<p>
<a href="jquery.yummi.zip">Download</a>.
Add the Javascript (point the "src" attribute to wherever you're hosting the file) to the <head> tag
</p>
<code>
<script type="text/javascript" src="jquery.yummi.js"></script>
</code>
<p>And the CSS</p>
<code>
<link rel="stylesheet" href="yummi.css" type="text/css" />
</code>
<p>
You can style yummi by editing the <strong>yummi.css</strong> file.
</p>
<h2>Assumptions made:</h2>
<ul>
<li>
<strong>input tags are wrapped in a div</strong>. This is to ensure that the
auto-complete suggestions will appear right under the text field. "Cleaner" ways
to achieve the same effect that I know of result in too much Javascript,
too much CSS, or both. Though I'm <a href="mailto:[email protected]">happy to hear from you</a>
if you know of a way.
</li>
</ul>
<h2>Requirements:</h2>
<ul>
<li>A modern browser (Safari 3.5+, Firefox 3.5+, IE 8 (*cough*). No guarantees regarding IE 6 and 7).</li>
<li><a href="http://jquery.com">jQuery 1.3.2</a>, included with the download.</li>
<li>The magnificent <a href="http://www.bramstein.com/projects/jsizes/">jSizes</a> plugin, also included.</li>
</ul>
<h2>Author, copyright and license.</h2>
<ul>
<li>
<a href="mailto:[email protected]">Julio Cesar Ody</a>.
</li>
<li>
Copyright <a href="http://www.incite.com">Incite</a>.
</li>
<li>
<a href="http://www.opensource.org/licenses/mit-license.php">MIT</a> licensed.
</li>
</ul>
</div>
</body>
</html>