jQuery Dynamic TextboxList with Autocomplete
Hmmm, had a hard time naming this since I couldn’t think of a title that was succinct and more descriptive than the generic one above. Any suggestions? Update: it’s official! In honor of Transformers everywhere, it’s now called autobox.
Anyway, let’s just show the plugin:
Now the story:
Guillermo Rauch has a very nice mootools script that does a Facebook-like or AppleMail-like input control: thebasic one here and here with autocompletion. The first thing I noticed is that Guillermo is only 17 years old! If you look at his original code, it’s clean and well written even if he was an industry veteran - amazing!
This plugin is what we’re looking for in our email composer. Also, I was looking to actually cutting my teeth a little bit in javascript and jQuery (I’m currently reading chapter 3 of the jQ in Action book). This points at porting this thing so here it is:
Update (12/3): Use new autobox2 plugin!
Update (10/23): Connect input behavior to submit values; updated example
jq-autobox-plugin-052.zip
Update (10/21): Rename to autobox
jq-autobox-plugin-051.zip
jq.textboxlist.plugin-050.zip
Notes on the port:
- Unlike this prototype port, it’s not a line-by-line port. I’ve simplified it in some ways and added a few features.
- The biggest simplification is that the mini-input boxes are gone. I originally ported them, but didn’t really see a use for them. Since I mostly believe in cutting rather than hiding, that’s what I did. It also made some of the focus/blur/movement easier.
- The mootools and prototype version are object-oriented style. My port is more functional program style. That is, I think it’s more functional programming style since I do not have much experience with functional programming. I will say though, that what I think is functional programming, is very natural and clear. Reminds me a bit of my college Scheme programming. That said, the code is not very extensible.
- Javascript programming is a ton of fun.
- I integrated the autocomplete directly into the plugin. The original extended the textbox list class. To me, the autocomplete is part of the control and also, to the last point, it wasn’t exactly clear to me the most natural or accepted way to extend the plugin.
- The focus/blur/movements were simplified.
- You can enter a value and press return, which will add that value as an item.
- Actually formatted it and put a few comments.
- There is some focus/blur funkiness that needs to be worked out.
- Tested on IE7 and FF3.
- Validation to be added.
We would love to get feedback on the control! The release is 0.5.0 (alpha); I’m sure there are problems with it and bug reports would be appreciated as well. I will release at least a few more versions as they get cooked and I get more familiar with jQuery and Javascript.
Quick instructions to create the demo above:
- In your HTML, include jQuery, the plugin (jquery.textboxlist.js), and the CSS (jquery.textboxlist.css).
- Put close.gif in the same directory or else change the css to point to where you put it.
- The CSS assumes a form with ordered list and list element container. I.e. the CSS assumes the form as in the example.
- Below the main input element, in the same list element, add a div element with the ID from above appended by ‘-auto’, this is the autofeed. See the example.
- In a script tag, get the ID and call ‘.textboxlist()’ on it to make it a textboxlist.
- Optionally pre-populate any autofeed elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery TextboxList Demo</title>
<link rel="stylesheet" href="jquery.textboxlist.css" type="text/css" media="screen" title="Test Stylesheet" charset="utf-8" />
<script src="../jqueryjs/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.textboxlist.js" type="text/javascript" charset="utf-8"></script>
<style>img{ height: 100px; float: left; }</style>
</head>
<body>
<form action="test_submit" method="get" accept-charset="utf-8">
<ol><li>
<label>Test input</label>
<input type="text" value="" id="test-1"/>
<div id="test-1-auto">
<div class="default">Type an email or list name</div>
<ul class="feed">
<li>fred@foo.bar</li>
<li>barney@foo.bar</li>
</ul>
</div>
</li></ol>
</form>
<script>
$(function() {
var tbl = $('#test-1').textboxlist().get(0);
//tbl.add('added@here.com');
//tbl.autoFeed('autofeed1@there.com');
//tbl.autoFeed('autofeed2@there.com');
//tbl.autoFeed('autofeed3@there.com');
$.getJSON('json.html', function(json) {
$.each(json, function(idx,str) { tbl.autoFeed(str); });
});
});
</script>
<div id="console">
</div>
</body>
</html>
17 Comments