IT IS HERE! Get Smashing Node.JS on Amazon Kindle today!
Show Posts
← Back to homepage

It’s been some time since TextboxList got some attention. It is undoubtedly one of my most popular JavaScript projects, along with the famous Fancy Menu (MorphList) and its slideshow sibling, BarackSlideshow.

TextboxList (demo) has been rewritten from scratch, and it’s more solid than ever. The first time around, elegance was not one of the goals. I focused on releasing the first open source script that reproduced the Facebook’s tokenizer.

Let’s see the new changes:

TextboxList

  • Compatible with MooTools 1.2.x
  • New options, such as addOnEnter, which adds boxes upon pressing enter (useful for tags or categories widgets).
  • More events, which gives the developer more power to extend it.
  • Each element is now identified by an id, a plain value and a HTML value.
  • Use of control, alt, meta keys no longer interfere with the elements keyboard navigation.
  • Bugs with text selection fixed.
  • Improved API, even more extensible.
  • Plugins support

Textboxlist.Autocomplete

This is the most important official plugin. It also has been rewritten, and packs new features:

  • Flexible. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere.
  • Binary search for maximum performance
  • Simpler CSS with comments for non-experienced developers.

Without further ado, head to the project page to check out the demos and downloads.

70 Comments

Just a heads up: the BarackSlideshow link gives a 404.

    Guillermo Rauch said

    Fixed. Thanks!

Santiago Quiss said

Great!!! Thanks for listening to my request! I’ve been waiting for this release!! Sos muy groso…

Jamil Aslam said

Nice work.

B. Waite said

Fantastic work.

My shop would pay dearly for a JQuery version.

George said

What the hell, where is the demo if this thing, I dont want to download it just to fucking test it

Nice work! I especially like the DEMO on the project page :P

Dan said

We would definitely pay for a Dojo version.

Stian said

Great script!! I wonder if it’s possible to submit other values than the displayed ones, just like a regular select box. I have a database with names and unique ids. I need to display the names, but submit the ids.

    Guillermo Rauch said

    Read the article page, it explains all use cases thoroughly.

lawrence77 said

wow!
Really cool!
I’m amazed! :P

Reid said

This is great!

Nice work – another vote for a jQuery version :)

Marc said

Brilliant! Another vote for jQuery version.

David King said

Lovely code – There’s a few missing features that you could drop in quite easily (I reckon):

* When adding tags the last one should be added “onblur” instead of being left as text
* Suggestions should be selectable with the Right arrow as well as enter (like in browser suggestion lists) cause some people will be used to that behaviour.

Kudos ++

    Guillermo Rauch said

    Thanks for the comment David.

    1) This behavior is enabled by the addOnBlur option of the editable bit. I felt this was not a good ‘default’ though.

    2) The problem is that the right arrow will conflict with the base TextboxList behavior :( One way would be to disable box moving while suggestions are present, but might be even more confusing.

Jamie said

Very nice program – the Facebook/Apple style is very user-friendly, esp. as it works with the keyboard too.

It’s good that the user can select an item from the autosuggest list with Enter, but it would be even better if the form was submitted when Enter was used and the autosuggest box was not open. In other words, it would be useful if a stopEnter option was available as with non-autosuggest boxes.

Nice work, purchasing a commercial license.

    Olivier Refalo said

    Question: Can the widget dynamically request JSON suggestions ?
    I see in your example that you are pre-reading a list of suggestions. This is great but it only works when the list is small.

    What if the list of entries is Huge ? -> there is actually another project which does this right, autocompleter.

    I was wondering if textboxlist had the same hooks in the api…

    Guillermo Rauch said

    Out of the box it doesn’t. The main reason for this is that it’s meant to work ala Facebook or Gmail, with preloading.

    However, I had this other use in mind, and I designed it in such a way that the user could extend it to work like this.

    Olivier Refalo said

    hum, could you provide guidance as to how to implement it ? High level guidance, what class/methods to overload and what to do.

    Sorry I am not an expert, plus guidance usually helps getting up to speed.

    Thank you,

Roger said

I’m trying to translate the autocomplete.php page into coldfusion. Has anybody done this? Any help would be great.

    Olivier Refalo said

    I have it as JSPX if you would like

    Marwan Roushdy said

    got it as an Http data handler (.ashx) using c# if you want it

Axel said

Great script, but not working properly on Opera 9.6 :-(

Andre LeFort said

Hi Guillermo!

First off, many many thanks for this awesome textboxlist widget! I’m very impressed with it!

However, it seems I may have found a small bug when using the autocomplete plugin. The bug can be reproduced on your demo page.

When adding an item from a the autocomplete dropdown, it isn’t actually being added to the list of bits for the textboxlist. This can be demonstrated by adding one and then hitting the submit button. You’ll notice it isn’t showing up in your array that you print out.

Also, this is for the mootools version…but it also seems to happen in the jQuery version.

Any chance you could take a look at this? Cheers!

Andre

    Andre LeFort said

    Just to elaborate….the issue only pops up when I select the very first item in the possible matches, in this case, AIAI. Otherwise, the bit value is actually set and flows through to the php script…

    Andre LeFort said

    I’ve actually managed to get around this with a rather simple hack. The first results I return as JSON to my Autocomplete plugin through setValues is an array with blank strings for values.

    I thought I would post this in case anyone needed a quick workaround quickly…

gotch said

Hi!

I really like your script, but I need to use it in french, and it doesn’t work with accent characters. I tried to switch the charset from utf8 to iso-8859-1, but it doesn’t work. Also tryed to utf8_encore / _decode everywhere, no success..

Does anyone could help me plz? Even in french, pas de problème :-)

Thanks!!

Thanks!

Marwan Roushdy said

This is incredibly useful definitely going to buy this however found some bugs that i tried to fix with no success. Would really appreciate your help.

1- if the autosuggest plugin is used, both the Addonblur and addKeys stop working
2- If i center the texboxlist the autosuggest starts from the center and is not aligned with the text box.

Thanks!!

    Marwan Roushdy said

    I have fixed the centering problem however i still cant get the add keys and Addonblur to work when autosuggest is on

    Jeremy Mikola said

    Regarding (1), I noticed the same problem and found that the autocomplete plugin was explicitly disabling addKeys. Presumably, this is because it uses keys to navigate the autocomplete drop-down (and must access arrows and enter). I’m hesitant to disable it, but the lines you’ll want to look at is at the start of the init() function in the autocomplete module.

Эх… :) Вы бы знали что про Вас пишут в других блогах :)

Adrian said

Hi, I have two questions:
(1) How do I completely reset the box? I’ve tried removing it from the DOM and using new TextboxList(…) again, but the old input remains.
(2) When I use a autocomplete suggestion, I cannot use it again, which is good; but when I delete it from the box, I still can’t use it again. I guess this is a bug.
Thanks!

    A said

    I decided to have a look at the code today.

    Solved (1) by removing all but the last child from .textboxlist-bits
    Solved (2) by setting unique to true to circumvent the bug.

    Has this project been discontinued, or else why do you ignore questions in spite of the fact that you charge for it?

    Guillermo Rauch said

    (1) That was the way to do it, nothing magical there nor unexpected.

    (2) I’ll be releasing the fix soon, and solutions have been posted here.

    (1) I removed all the elements bt the last child form .textboxlist-bits and it solved my problem for removing all the elements from the textbox.

    (2) But I also want to see all the suggestions even those which were entered earlier before clearing the autocomplete textbox. After I clear (as mentioned in point 1)I can not see my suggestions which were previously entered. The earlier posts mentions to use “unique”, but I am unable to understand that, a sample code would really help to understand

tatil said

thank you very good.

Marwan said

Is there a way to make a max length of carachters that could be inputted in each bit?

balimoyda said

Can Someone give an example usage, to set some default box, like other form commonly.. and the how to use max function, to set max box/value?

Я практически никогда не сомневался в Вашем интеллектуальном уровне, но поймите, не все такие как Вы. :)

sree said

Nice work.

I have one question

1) How to remove/rest all elements in textboxlist using javascript.

- Sree

    Justin said

    I also am having trouble figuring out how to remove all of the existing bits form the input box. Can someone post some sample code? Thanks you, great project!

    Iamneht said

                    resetForm = function() {
                        var bitArray = $$(‘ul.textboxlist-bits .textboxlist-bit’);
                        //$$(‘ul.textboxlist-bits .textboxlist-bit’).each(function(e, index) {
                        bitArray.each(function (e, index) {
                            if (index < (bitArray.length – 1) ) e.dispose(); /// Keep last element as an blank input ///
                        });
                    }

Hi,

Hi, I have two questions:

(1) How do I completely reset the box? I’ve tried removing it from the DOM and using new TextboxList(…) again, but the old input remains.
(2) When I use a autocomplete suggestion, I cannot use it again, which is good; but when I delete it from the box, I still can’t use it again. I guess this is a bug.

The solutions that I used are given below but still I was not able to achieve the goals. Any help would be really appreciated.

(1) I removed all the elements bt the last child form .textboxlist-bits and it solved my problem for removing all the elements from the textbox.

(2) But I also want to see all the suggestions even those which were entered earlier before clearing the autocomplete textbox. After I clear (as mentioned in point 1)I can not see my suggestions which were previously entered. The earlier posts mentions to use “unique”, but I am unable to understand that, a sample code would really help to understand

Thanks,
Saumil

CJ said

Fabulous

surya said

HI , When i implement in my project ( Asp.net 3.5 Using Master Pages) . I am getting Error.

Error is due to in TextboxList.Autocomplete.js File For the Following Function

TextboxList.Autocomplete.Methods = {

standard: {
filter: function(values, search, insensitive, max)
in above method , values parameter doest not getting values.

Please Advice me . Its Very Urgent

Carlos said

Hey this is great

Navotera said

var t = new $.TextboxList(‘#my_form_input’, {unique: true, plugins: {autocomplete: {}}, bitsOptions:{editable:{addKeys: [188]}}}); 

obviously i cannot understand why when i add the bitsOptions bla..bla..bla… it doesnot getting on the Input Key….. (the autocomplete is doing right)…is there any solution to fix this ????

Yash said

Hello peoplw

Swaraj said

i like to have sex with my girlfriend umang

Peter3518 said

probando desde uruguay

patrick said

I have a page and have used your jquery stuff. Am facing an issue with the plugin, since my page is dynamic and fetch the data from backend. The id’s for the textbox are autogenerated. I don’t want to play with class as the plugin generate 2 textboxes for the second one. How is there any method where we can send the data in your plugin dynamically?

Olmo said

I love it!

Your thoughts?

About Guillermo Rauch:

CTO and co-founder of LearnBoost / Cloudup (acquired by Automattic in 2013). Argentine living in SF.