Error 404

I tried the tokenlist plugin, but it failed to autocomplete anything but the first item. Also as Almog mentioned it should be possible to remove items again using the backspace key. It looks like a promising plugin though!

Essentially this implements design F6 in the docs above.

The html is built by creating a div placed immediately after the enhanced input (textarea or input type=text only). That div is given the width of the replaced textbox, and the min-height of the enhanced textbox. Inside it builds a list. that list contains a new input box (not textarea). upon instantiation any delimited values are used to create the starting list of items. Any addition or removal of list items updates the enhanced (and hidden) textbox. Clicking anywhere in the root div not directly on a list item highlights the item entry textbox. If autocomplete is enabled a tip div appears below the textbox telling the user to start typing to receive suggestions. The arrow keys move around between the items. delete and backspace delete an item and highlight the next appropriate item or gives focus to the input box as appropriate.

The option not yet implemented is the prevention of duplicates.

Autocomplete utilizes the ui.autocomplete in jquery ui 1.8+. The autocomplete option defaults to false meaning that one is not instantiated. Otherwise you can pass in any valid options that work for the jquery ui autocomplete, as they are passed directly to instantiate an autocomplete on the child entry textbox.

Oh, and re-ordering is not implemented. But that should be as easy as making the list sortable, and then on sort complete updating the enhanced textbox from the list again.

I have implemented the duplicates option (default of not allowed). I've also added and implemented the sorting option (default off). Both are boolean options only. The sorting option when enabled only allows all but the last item in the list, which contains the text imput to be sorted.

I've also fixed a bug: If you had partially entered a value but not yet hit enter to add it to the list of values, whatever was still in the edit box was not being synched with the underlying original textbox. The fix was to on listblur take any text value in the editor and make it a list item.

The demo is updated: http://nexul.com/prototypes/tokenlist/demo.html

The script: http://nexul.com/prototypes/tokenlist/src/jquery-ui-listbuilder.js

I still need to implement a menu for each list item (visual design F7). My current thought is just to make itemSelected an event. The event would include the relevant event and the list item in the parameter list. The relevant event could either be a keypress (left, up, right, down, delete, backspace), or a click. On backspace or delete, the event would include the item gaining focus after the previous item was deleted. That would keep the plugin design minimal, while also giving much more flexibility to the user to either show a menu relative to the list item token, or anything else they can imagine.

Does anyone else have another preference for how the F7 visual design should be supported or implemented?

fixed: sortable now updates linked textbox on sort complete

fixed: refined keyboard navigation scripts, but one quirk remains in IE7. The 'left' arrow does not work in IE 7 (and presumably IE6) when there is text in the enhanced editor. In that case the user can use the 'up' arrow key instead. This is because IE7 and older does not support the selectionStart property of a text input. This is not a problem in IE8, firefox, or chrome. backspace was also updated so that it only deletes the last list item if the cursor is on the leftmost character in the enhanced textbox when it is pressed.

Feature: I added the onSelect event. It fires when the cursor hovers over an item, or click on an item. The type of select is a parameter to the event. The demo shows a menu only when onSelect is fired from a click. It logs both the 'mouseenter' onSelect and the 'click' onSelect in a visible log area on the page.

The demo references menu version 1.9 milestone 2 only so the menu works. If you don't use the menu as on the demo page the script works fine in jQuery UI 1.8. The demo page shows all the tested browsers. If anyone tests it in other browsers, please let me know the result so I can update the demo page stats.

I believe all features mentioned on this wiki page so far have been implemented per spec (visual design F6 and F7). Please try it out and see if you have any suggestions for improvement.

I presume you mean, "how do you add a tag that is not defined in the autocomplete?"

Just type and hit enter or tab when done. The browsers I've tested so far do not enforce selection of a predefined value. If your experience is different, then what browser are you using and on what OS?

The listbuilder delegates all autocomplete behavior to the autocomplete plugin. So you can restrict values if you like just by passing in the correct parameters. See here how you can specify any autocomplete supported option:
$('#test1').listbuilder({
autocomplete:{
source:data,
//... add your other autocomplete options here ...
},
sortable:false,duplicates:false
});

My example does not explicitly answer your question. Instead, look at this guide and see the note on how to implement 'mustMatch' on the new autocomplete widget.
http://learningjquery.com/2010/06/autocomplete-migration-guide

If you have any further problems specifically with the autocomplete widget you'll get better answers from the 'using jQueryUI" forum:
http://forum.jquery.com/using-jquery-ui