Show Posts
← Back to homepage

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 use new $.TextboxList

  • [BUGFIX] GrowingInput now works in noConflict mode

  • [BUGFIX] Fix for GrowingInput to 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.

50 Comments

Jesper said

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 ;-)

    Guillermo Rauch said

    My bad, I uploaded 0.4v2 with the fix!

Jesper said

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…

Jesper (Again) said

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 …

    Jesper said

    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!

Jesper (Again again) said

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… :-)

    Jesper said

    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 :-|

LB said

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!

    Guillermo Rauch said

    options::encode function. You can also set it to JSON.stringify for example.

    LB said

    ooooh thanks! (if you are looking to change the delimiter, modify TextBoxList.js — starts around line 31.)

Radames said

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

MIchael said

Guillermo – thanks so much for updating!! I’ll let you know if I have any issues…

    Guillermo Rauch said

    :) Let me know how it goes

Michael Steuer said

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?

    Michael Steuer said

    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.

    Guillermo Rauch said

    Yeah for now it’s intended behavior to avoid certain problems. In the future key handling will be more sophisticated.

    Michael Steuer said

    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?

    Guillermo Rauch said

    Yeah right now Moo and jQuery versions are in sync. This fix is at the top of my priority list.

    Michael Steuer said

    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?

    Guillermo Rauch said

    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.

    Guillermo Rauch said

    You have to keep in mind that the DOM event system is very rudimentary ;)

    Michael Steuer said

    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?

    Guillermo Rauch said

    It should. Lame script

    Michael Steuer said

    Haha ;)
    Any hint on where I might fix this perhaps? ;)
    Happy Thanksgiving! Big fan of your “lame script”!!!

    Michael Steuer said

    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.

    Guillermo Rauch said

    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;

Cris said

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!

    Guillermo Rauch said

    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.

Guilherme said

Hi, how to add event onclick for bits?

To execute external function, once on click bit.

Emre said

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.

    Neji said

    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);

sandy said

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?

    Tevch said

    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’, { });

tedy said

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.

Рубен said

Познавательно! Только не могу понять насколько часто обновляется блог? :)

daronWolff said

How can i validate the format of a email address. I cant understat how do it using the function “check”.
Please somebody help me

Muhammad said

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!

Muhammad said

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.

ZyBeR said

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.

Kamran said

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!

werner said

is it possible to delete a bit out of the code, something like textboxInstance.remove(‘myBit’); ?????

Josh said

Does anyone have a working example of using an event, such as bitAdd? I cant find one anywhere.

Josh said

Is there any update regarding the comma delimiter use with autocomplete?

Thanks!

Kam said

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.

Jay said

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

Gautam said

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..

Bostondevin said

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!

Tung Nguyen said

I have a error at “decode: function(o){ return o.split(‘,’); }” in TextboxList.js
Error: o is undefinedHelp me

Tung Nguyen said

I have a error at “decode: function(o){ return o.split(‘,’); }” in TextboxList.jsError: o is undefinedPlease help me!!!

Guillermo Rauch said

There’s an update coming that addresses this issue. Stay tuned

Your thoughts?

About Guillermo Rauch:

CTO and co-founder of LearnBoost, developer, open source enthusiast, blogger.