jQuery.inlineComplete

WTF?

The jQuery.inlineComplete plugin enables you to have an inline auto-completion for your text fields. It was inspired by the Google Chrome’s “Omnibar”. Here, every single text you typed in the address bar and hit return afterwards, will be auto-completed right in the text field as you type.

This plugin is still work-in-progress! Expect bugs, missing features or unusual behaviour, either caused by bugs or because some things aren’t implemented yet!

jQuery.inlineComplete is licensed under the MIT license, so you’re allowed to do almost anything with it. If you use it on your website some credit would be nice, but is not required.

Why not use one of those other auto-complete plugins?

This type of auto-completion only makes sense when there are only few terms in question. Here’s an example:

Let’s say we have some kind of music site. There a search field on the homepage, where a user may type in everything: An artist, track title, album title or a mix of all three. Having an inline auto-complete here doesn’t make sense, since the user could type “daft punk” while searching for an album, for the artist or a track. In this case, the classical type of auto-complete, which shows a list of possible items the user could be searching for, is a lot more useful than just suggesting a single term.

Our site also has an advanced search. Here, the user is able to search for the artist, album title or track title explicitly in separate text fields. If the user now selects the artist field and types “daf”, it’s pretty clear he wants to type “Daft Punk”, an inline auto-complete here would enable the user to just hit return and the word “Daft Punk” is inserted into the field.

In addition, inline auto-complete and classical auto-complete don’t excluded each other. Facebook for example could use both techniques in each friend search text field. They could suggest both Alberts in your friend list with the classical auto-suggest view, but inline-complete just the one you wrote the last message to. Furthermore, I’m pretty sure Facebook has some meter of how good your relationship is with all of your friends, thus being able to inline-complete the one which is ranked highest.

Options Reference

The list of options currently is, well, straightforward:

Optionname	Explanation
caseInsensitive	Optional, default value is true. Sets whether the searching is case sensitive.
terms	Optional, default is empty. The list of terms the plugin should auto-complete. This may be a JavaScript array or a string pointing to an external list (e.g. “artists.json” or “artists.php”, see Usage » External source for examples). You may also omit this option when the targeted element has a HTML5 data attribute, see Usage » HTML5 data attribute for examples.

Usage

As with almost all jQuery plugins, the usage is really simple.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>jQuery.inlineComplete demo</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.inlinecomplete.js"></script>
	<script type="text/javascript">
		$(function() {
			$('[name=artist].inline-complete').inlineComplete({
				terms: ["Daft Punk", "Deadmau5", "Rammstein", "Rihanna", "Eminem", "Michael Jackson"]
			});
		});
	</script>
</head>
<body>
	<h1>Your favourite artist</h1>
	<p>
		Please type in your favourite artist: <input type="text" name="artist" class="inline-complete" id="" />
	</p>
</body>
</html>

Include jQuery (1.4 or 1.5), include the jquery.inlinecomplete.js file and call the plugin on the desired elements.

External source

In order to have inlineComplete to load an external list, just pass in a URL, the rest is done by the plugin.

{
	"terms": ["Daft Punk", "Deadmau5", "Rammstein", "Rihanna", "Eminem", "Michael Jackson"]
}

$('[name=artist].inline-complete').inlineComplete({
	terms: "artistlist.json"
});

The AJAX request is done at initialization time, so there is no delay when using the inlineComplete-enabled text field.

The external list doesn’t need be a JSON file of course. As long as the response is valid JSON and the index “terms” is present, you may pass anything you like, such as a URL to a PHP script:

<!--?php // [Load artists from database or something...] $artists = array("terms" =--> array(
    "Daft Punk", "Deadmau5", "Rammstein", "Rihanna", "Eminem", "Michael Jackson"
));

header('Content-Type', 'application/json');

echo json_encode($artists);

The inlineComplete call:

$('[name=artist].inline-complete').inlineComplete({
	terms: "artists.php"
});

You may also change the case sensitivity along with the terms in the options (default is true):

$('[name=artist].inline-complete').inlineComplete({
	caseInsensitive: false,
	terms: "artists.php"
});

HTML5 data attribute

If you’re an early bird and are already using the HTML5 data attributes, you may also use those to pass a list of terms to the plugin:

<input class="inline-complete" name="artist" type="text" />

The plugin then recognizes that list by itself if there aren’t any terms given in the options.

$('[name=artist].inline-complete').inlineComplete();

Since this can be very ineffective with a long term list, you may also pass in a URL:

<input class="inline-complete" name="artist" type="text" />

patrickburke.de