jQuery Delicious™ style auto-completion.

Why yet another auto-complete plugin?

To my knowledge, there's not a single jQuery based auto-completion plugin that can
auto-complete any word in a text field no matter what the position is.
While we're at it, apparently not even Delicious'
web interface auto-complete seems to do it. It only operates on the last word.
Also, having to install YUI to be able
to use it isn't an option as far as I'm concerned.

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.

Demo:

Fruits (as usual)

Usage:

Simply invoke yummi() on a selector that points to a text field, like so:

You can update the collection that's being used by an element by invoking yummi()
again on the same element.

Why no AJAX?!

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.

However, if you'd like to have it, here's an example on how you could do it.

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".

Installation:

Download.
Add the Javascript (point the "src" attribute to wherever you're hosting the file) to the <head> tag

<script type="text/javascript" src="jquery.yummi.js"></script>

And the CSS

<link rel="stylesheet" href="yummi.css" type="text/css" />

You can style yummi by editing the yummi.css file.

Assumptions made:

input tags are wrapped in a div. 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 happy to hear from you
if you know of a way.