Hey everybody. It didn’t take long before glitches and features were reported, so first of all, i’d like to thank all of you for taking the time to check out the code and report all the bugs you found, it really helped taking the script further, i’m sure that the next build will not be perfect and that’s why your help is still needed to keep checking and suggest new cool features for next versions.

In this build I tried to include all the suggested features, I hope that nobody will be disappointed. There are also few bug fixes but most features upgrade. I encourage all of you to suggest any features you have in mind, because what might be useful for you, may be useful to others, so please do so..

The new version incorporates few new options:

• fetchFile – default: undefined; a JSON file that is being called with the parameter keyword whenever a key is being typed
• results – default: 10; the number of results to display before showing a scrollbar, if more results match a scrollbar is displayed
• wordMatch – default: false; when set to true will match only the beginning of word, otherwise will match anywhere

Here is a list of changes on this upcoming build, and by the way, the name has been changed to Proto!MultiSelect in order to avoid confusion with our dearest friend’s, Guillermo Rauch, project.

- 0.2: renamed from Proto!TextboxList to Proto!MultiSelect, added new features/bug fixes
added feature: support to fetch list on-the-fly using AJAX Credit: Cheeseroll
added feature: support for value/caption
added feature: maximum results to display, when greater displays a scrollbar Credit: Marcel
added feature: filter by the beginning of word only or everywhere in the word Credit: Kiliman
added feature: shows hand cursor when going over options
bug fix: the click event stopped working
bug fix: the cursor does not ‘travel’ when going up/down the list Credit: Marcel

Fixed 02/19/08

A glitch where deleted records are not being re-added to the list. – suggested by  Antoine

Demo

Click here for demo

Download

Click here to download

This is the Prototype version of the extended script by Guillermo Rauch. As with the previous script, this script has been converted and operates like the original. An extended and upgraded version will be posted later on this week, if you have any comments or requests, please post them and I will try to include all the requested features in the upcoming Proto release.

Click here to see demo

Here is the original post by Guillermo that describes the script:

In my previous blogpost I explained how to extend TextboxList to add closing functionality via a link added to each box. But it was missing an important ingredient: autocompletion!

Again, all we have to do is extend the TextboxList class, override some methods, some events, and create some new ones (all prefixed by auto)

It works by caching all the results from a JSON Request and feeding them to the autocompleter object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.

Another new feature is that you’ll be able to let it add boxes from the HTML directly:

The constructor now takes new parameters to configure the autocompletion, like the minimum number of characters to trigger the dropdown, and more.

Download

Click here to download the script

New version is out, check it out!

Hey everybody, after coming across Guillermo Rauch’s script, I knew i had to port it into my favorite library, Prototype. In this page you will find the Guillermo's script translated into Prototype. I kept the original formatting and will post it just like he did for the ease of understanding for people who used the original first. Later on this week, I will release an improved version of the script. This post is a conversion of the original deal. The improved script will include more features and implement several improvements. Let me include the original post by Guillermo that describes the script. The post is slightly modified to suite my blog's format. Have fun, and please! report any glitches or feature requests so I will implement those in the improved version, due later on this week.

Original post:

Check out a demo of TextboxList before reading!

While working on my big and exciting new project, I decided to include an input that resembles the famous Apple Mail to: textfield. I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)

I created my own, MooTools 1.2 [Now: Prototype] compatible, in just 5kb. It’s not only small, but also really frexible! Here are some notes of the creation process and how to implement it in your own projects.
Anatomy of the control

As usual, I try to come up with a semantic, unobtrusive approach. I start with the CSS and the markup that will be my end result.

I want to go from something like this:

to something like this (only one possible scenario, naturally)

Basically, it’s a group of pieces (that I’ll call bits), that can be either a box or an input (small, except for the main one). The user is able to move around between the bits by using his keyboard or his mouse.
Javascript

As far as the javascript goes, I try to first think about reusable code (usually classes) that I may use. I thus first coded the class that adds resizing capabilities to the small fields as the user types, and a small utility method to find the caret position.

The only challenges I found was handling the complex events while keeping everything crossbrowser. Again, none of this would have been possible if it wasn’t for MooTools (1.2) [Now: Prototype].
Using it

All you have to do is:

Where input-demo is the id of the desired input to replace

The constructor can take these options:

* onInputFocus (event, fired when an input gets focus)
* onInputBlur (event, fired when an input loses focus)
* onBoxFocus (event, fired when a box gets focus)
* onBoxBlur (event, fired when a box loses focus)
* onBoxDispose (event, fired when a box is removed)
* resizable (option, hash, passed to ResizableTextbox constructor)
* className (option, string, prefix of the classnames of the generated objects)
* extrainputs (option, boolean, adds small inputs between boxes if true)
* startinput (option, boolean, adds a small input before the first box if true)
* hideempty (option, boolean, hides the small inputs by default)

Download

Click here to download the cool script