Big update for my dear jQuery users. I’m rolling out TextboxList for jQuery 0.4 with these updates:
- [FEATURE] Autocompletion with on-demand server querying
-
[ENHANCEMENT] All classes moved to $. to avoid global namespace pollution. Please make sure to prepend
$.to TextboxList if you are upgrading from an older version:new $.TextboxList('#element'); -
[FEATURE] Easier jQuery-friendly initialization like this:
$('#element').textboxlist({options});However, if you still need to access the TextboxList instance to call additional methods (like
add), you’ll have to continue to usenew $.TextboxList - [BUGFIX]
GrowingInputnow works in noConflict mode - [BUGFIX] Fix for
GrowingInputto handle special characters and correctly calculate the input length. - [BUGFIX] Fix for support of multiple addKeys
- [BUGFIX] Fix for focus problem when TextboxList gains focus through focusing an editable input
- [BUGFIX] Autocomplete search term is now trimmed (thanks Mike Feng)
- [BUGFIX] Fix for when the max option is used
- [BUGFIX] Fix for unique = true and autocomplete.
As usual, head to the project page for download.
if ( comments_open() ) { ?>
50 Comments
Might just be me, but not sure how to get the right output after “send”…
I want to be able to get the output out in an array like this:
$email = array(uid => name, uid => name, uid => name);
Where do I set the output for this when pressing send (using the demo submit page?)
Hope somebody can help… By the way… SUPER SCRIPT
My bad, I uploaded 0.4v2 with the fix!
Ahhh. Thanks, works perfect… Have 1 question though… If I want the predefined values (t4.add(‘John Doe’).add(‘Jane Roe’);) to be like the ones I select on autocomplete how should they look then?
I have tryid like this but with no luck…
add(’56′,’John Doe’,'null’,'John Doe’)
Can this be done?!
Thanks in advance…
Yes, its me again… I’m struggeling a bit with the resultpage…
As it is now I get the output like this:
Array ( [users] => 33,57,48,198)
I want to be able to take each userid out of the array and make a php loop where I send the email to each user, but cant seem to do so… How do I get the userid seperated from each other?
Please help me with this Great Script …
Well… Found the solution my self…
$reciever = $_POST['recievers'];
$test = explode(“,”,$reciever);
foreach($test as $test1){
echo $test1.”;
}
Still need some help with the other issue… Havent figured that out yet!
One more question though… How do I include special charectars in the search like scandinavian letters??? Every name with an “æøå” is not in the list???
Thanks agin for this great script…
Found out that the fault happens in this:
header(‘Content-type: application/json’);
echo json_encode($response);
Before this it shows up prefectly with “ÆØÅ” (danish language)…
Please help
Is there any way to change the delimiter that separates the selected options when posted from what it is now — a comma — to a pipe or semi-colon or whatever? I have looked in the files but am not finding where to make this happen. Appreciate your help!
This is an awesome script! Thanks for creating it and making it available!
options::encode function. You can also set it to JSON.stringify for example.
ooooh thanks! (if you are looking to change the delimiter, modify TextBoxList.js — starts around line 31.)
hi
thanks a lot for thiswork.
is this a bug?
http://devthought.com/wp-content/projects/jquery/textboxlist/Demo/
if i close 1 tag box the focus go on the top of the page
but here it works
http://devthought.com/wp-content/projects/mootools/textboxlist/Demo/
the focus return in the input
can u help me?
(i’m a new jquery user)
thanks a lot from italy
radames
Guillermo – thanks so much for updating!! I’ll let you know if I have any issues…
Does anyone have a working example of defining (multiple) addKeys. Is set the option with the keycode for comma (188), but it doesn’t do anything… Has anyone been successful with this?
Also – I’m seeing some artifacts when tabbing out of the control in V4v2. It sometimes creates an empty bit, but it’s not a bit consisting of a space, it looks like the delete button with only a piece of a bit… you can move around it though with the cursors, so it’s definitely an actual bit… Anyone else seeing this in this new version?
So I have narrowed down the addKeys issue… Apparently, when you use the Autocomplete plugin, addKeys does NOT work… removing the Autocomplete plugin will enable addKeys… is this a bug? expected behavior? To clarify:
This DOES work:
$.t4 = new $.TextboxList(‘#selectrecips’, {bitsOptions:{editable:{addKeys: [188,13,9]}}, unique: true, max: 20, stopEnter: false});
Whereas this DOES NOT work:
$.t4 = new $.TextboxList(‘#selectrecips’, {bitsOptions:{editable:{addKeys: [188,13,9]}}, unique: true, max: 20, plugins: {autocomplete: {placeholder: ‘Enter the recipient names here’}}, stopEnter: false});
Please help!
Thanks,
Michael.
Yeah for now it’s intended behavior to avoid certain problems. In the future key handling will be more sophisticated.
Oh darn. That’s problematic. Does it work like this in the Mootools version too? When do you expect to be able to allow addkeys while using the Autocomplete plugin?
Yeah right now Moo and jQuery versions are in sync. This fix is at the top of my priority list.
Cool… I just played around a bit with Textboxlist.Autocomplete.js and now understand what your “certain problems” are. On line 41 I changed .setOptions({bitsOptions: {editable: {addKeys: false, stopEnter: false}}}); to .setOptions({bitsOptions: {editable: {addKeys: [188,13,9], stopEnter: false}}});
And I suppose using addKeys kills the ability to use the keyboard to select suggestions from Autocomplete, forcing you to use the mouse. I assume the “sophistication” you’re refering to is detecting whether a suggestion is highlighted or the cursor is in a bit to decide what the key events do?
The sophistication is more abstraction in the base class to give plugins more power to interact with keys. Maybe even using the Keyboard.js class that activates keyboards functions when the global focus event is triggered and disabled when the global blur is triggered. Then plugins could access the instance of that Keyboard manager.
You have to keep in mind that the DOM event system is very rudimentary
Got it
I do have one other issue with this version still.. Here’s my initialization:
$.t4 = new $.TextboxList(‘#selectrecips’, {bitsOptions:{editable:{stopEnter: false}}, unique: true, max: 20, plugins: {autocomplete: {placeholder: ‘Enter the recipient names here’}}});
Now when I enter the Textboxlist, don’t type anything and just hit Enter, it creates an empty bit with a delete button… Shouldn’t it check if length > 1 or something?
It should. Lame script
Haha

Any hint on where I might fix this perhaps?
Happy Thanksgiving! Big fan of your “lame script”!!!
Hi Guillermo – hope you had a great holiday weekend! Happy cyber monday…
Did you have any thoughts around the bug I reported above? Does it reproduce on your end? Any idea how I can quickly patch this?
Thank you so much, best, Michael.
An quick fix would be adding this to options before encode: (if you’re sending comma-separated values):
check: function(s){ return $.trim(s).replace(/,/g, ”) != ”; },
and then in create in the if(klass == ‘box’)
if ((!value[0] && !value[1]) || (chk(value[1]) && !options.check(value[1]))) return false;
Hi,
Does Textbox work with other languages or it is PHP exclusive?… Can I encode the response for autocomplete using something different than Json?.
Thanks and great work BTW!
The way TextboxList is designed, encoding and decoding of the data is up to the user (it’s an option). Usually I recommend people to pass JSON.parse/decode and JSON.stringify/encode as these options, but it’s flexible enough to adapt.
If you’re dealing with autocompletion or are in the need to identify the boxes with unique ids which are different from the displayed text, then JSON becomes almost unavoidable.
Of course PHP is not the only language that supports JSON encoding, so you can use that feature with most SS languages/frameworks.
Hi, how to add event onclick for bits?
To execute external function, once on click bit.
hi! thanks for this great script.
it looks that “unique” doesn’t work all the time. for example; type a name, then try to type it again, it doesn’t show up in the results. but if you type another name and delete it and type the first name again it appears in the results.
btw, i tried the same thing with mootools version and it works.
Looks like there’s a bit of a bug under the onRemove function, specifically this line:
if (i != -1) index = index.splice(i + 1, 1);
A few things wrong:
1. splice returns the removed elements…
2. We’re removing at i+1 which means nothing is removed.
hence an empty array is returned into “index”.
I’ve fixed mine by replacing the above line with the following:
if (i != -1) index.splice(i, 1);
Hello,
I tried your script, but when I look at with firebug, I see an error, like this:
o is undefined
[Break on this error] decode: function(o){ return o.split(‘,’); }\nTextboxList.js (line 25) at console.
Could you check it?
Was struggling with this too. The problem is naming in JQuery. It should start with #
Lets say the name of your component is ‘textbox’. So you must pass ‘#textbox’ in the constructor.
new $.TextboxList(‘#textbox’, { });
Dofus est un [url=http://www.bawwgt.com/fr]dofus kamas[/url], le joueur incarne un ou plusieurs personnages. On y retrouve une multitude [url=http://www.bawwgt.com/fr]acheter des dofus kamas[/url] et d’¨¦quipements en tout genre, une vingtaine de m¨¦tiers diff¨¦rents et plus d’une centaine de monstres r¨¦partis en diff¨¦rentes zones sur les 10 000 [url=http://www.bawwgt.com/fr]dofus kamas pas cher[/url] (portions de carte, sur lesquelles l’on se d¨¦place d’ailleurs comme sur une carte) formant l’univers de [url=http://www.bawwgt.com/fr]achat dofus kamas[/url], dont 99% ne sont accessibles qu’aux abonn¨¦s.
Познавательно! Только не могу понять насколько часто обновляется блог?
How can i validate the format of a email address. I cant understat how do it using the function “check”.
Please somebody help me
Could you provide a working example of how to add scrollbars to the results list? I have been trying to add scrollbars for a results list that contains a large number of results, using overflow: scroll or overflow: auto. This works great in Firefox 3.5, but in every other browser (IE 8, Chrome, Opera) it just closes the results list as soon as I attempt to click the scrollbar. I guess it treats the scrollbar click as an outside click and triggers the results list to close.
My CSS looks like this:
.textboxlist-autocomplete-results { margin: 0; padding: 0; max-height: 200px; overflow:scroll; z-index:99999}
Thanks!
Could you post a working example of how to add scrollbars to the autocomplete results list? I have been able to get this to work in Firefox by adding overflow: scroll or overflow: auto to .textboxlist-autocomplete-results
.textboxlist-autocomplete-results { margin: 0; padding: 0; max-height: 200px; zoom: 1; overflow:scroll; z-index:99999}
This is works in Firefox, but in IE, Chrome, and Opera the results list display loses focus and closes the results list as soon as I attempt to click on the scrollbar.
Hi, I needed to be able to add “static” bits, bits that the user could not delete but I couldn’t find that function implemented so I did a quick hack to solve it for me.
It would be nice if you in future releases could implement a refined version of this functionality.
Here is what I did:
1) Added this right after (function($){
var arrStaticBits = Array();
2) Update the add function to this:
var add = function(plain, id, html, afterEl){
if (jQuery.inArray(id,arrStaticBits) == -1) {
var b = create(‘box’, [id, plain, html]);
if (b){
if (!afterEl || !afterEl.length) afterEl = list.find(‘.’ + options.prefix + ‘-bit-box’).filter(‘:last’);
b.inject(afterEl.length ? afterEl : list, afterEl.length ? ‘after’ : ‘top’);
}
return self;
}
};
3) Add a new function (plain copy of the add function) called addStatic()
var addStatic = function(plain, id, html, afterEl){
if (jQuery.inArray(id,arrStaticBits) == -1) {
arrStaticBits.push(id);
var b = create(‘box’, [id, plain, html]);
if (b){
if (!afterEl || !afterEl.length) afterEl = list.find(‘.’ + options.prefix + ‘-bit-box’).filter(‘:last’);
b.inject(afterEl.length ? afterEl : list, afterEl.length ? ‘after’ : ‘top’);
}
return self;
}
};
4) Add the line below after: this.add = add;
this.addStatic = addStatic;
5) Update: var remove = function(){ to:
var remove = function(){
if (jQuery.inArray(self.value[0],arrStaticBits) == -1) {
blur();
textboxlist.onRemove(self);
bit.remove();
return fireBitEvent(‘remove’);
}
};
As I said, just a quick hack.
I’m not sure if this is the right place to ask this question, so anthropologies if it’s not. Using the Mootools Textboxlist. Is it possible to add a feature where press the down arrow key will show you the first few items? Also, what is wrong with trying to pre-select an item this way
window.addEvent(‘load’, function(){
var t4 = new TextboxList(‘form_tags_input_3′, {unique: true, plugins: {autocomplete: {}}});
var autocomplete = t4.plugins['autocomplete'];
autocomplete.setValues([
[31, 'Bit Plain Text']
]);
t4.add([31,'Bit Plain Text']);
});
Last thing, when using auto-complete, is there a setting where you disallow users to choose text not in the list?
Thanks!
is it possible to delete a bit out of the code, something like textboxInstance.remove(‘myBit’); ?????
Does anyone have a working example of using an event, such as bitAdd? I cant find one anywhere.
Is there any update regarding the comma delimiter use with autocomplete?
Thanks!
I am using the TextboxList. How can you configure it to submit a form on enter when you are not selecting a name from the drop down list?
Thanks.
Is there any way i can remove nodes or do a remove all feature. I’m trying to use this in a dialog box and each time the dialog is brought back it has the old values
I am too waiting for the fix to auto-suggest for including comma as a delimiter key. Any updates on this. Needed this urgently. Btw, thanx 4 d cool script..
How do I cause it to product JSON intead of comma-delimited? I hear you CAN do it but I don’t see any example of exactly HOW. Thanks!
I have a error at “decode: function(o){ return o.split(‘,’); }” in TextboxList.js
Error: o is undefinedHelp me
I have a error at “decode: function(o){ return o.split(‘,’); }” in TextboxList.jsError: o is undefinedPlease help me!!!
There’s an update coming that addresses this issue. Stay tuned