jQuery Delicious™ style auto-completion.

Download link, or browse the code on Github.

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:

Usage:

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

$('form :text:first').yummi({collection: ['keywords', 'for', 'auto', 'completion']})

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.

$.get('/fruits.json', '', function(myfruits) { $('form :text:first').yummi({collection: myfruits}) }, 'json')

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:

Requirements:

Author, copyright and license.