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.
Fixed. Thanks!
Great!!! Thanks for listening to my request! I’ve been waiting for this release!! Sos muy groso…
Nice work.
Fantastic work.
My shop would pay dearly for a JQuery version.
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
We would definitely pay for a Dojo version.
Pingback: More Powerful & Flexible Facebook-like TextboxList | Business Marketing Experts
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.
Read the article page, it explains all use cases thoroughly.
wow!
Really cool!
I’m amazed! :P
This is great!
Nice work – another vote for a jQuery version :)
Brilliant! Another vote for jQuery version.
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 ++
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.
Pingback: Facebook-Like Inputs With jQuery Or MooTools - Feed It
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.
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…
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.
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,
I’m trying to translate the autocomplete.php page into coldfusion. Has anybody done this? Any help would be great.
I have it as JSPX if you would like
got it as an Http data handler (.ashx) using c# if you want it
Great script, but not working properly on Opera 9.6 :-(
Pingback: TextboxList | Allt om färdiga open source lösningar för webben
Pingback: 9 Interesantes scripts y recursos estilo Facebook - davidcostales blog - Blog personal de David Costales. Inspiración, Diseño y Programación
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
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…
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…
Pingback: Style Blog » BarackSlideshow 0.3
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!
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!!
I have fixed the centering problem however i still cant get the add keys and Addonblur to work when autosuggest is on
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.
Эх… :) Вы бы знали что про Вас пишут в других блогах :)
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!
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?
(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
Pingback: 16 Javascript Tutorials Inspired By Social Networking Sites | Dev Words
Pingback: 10 utili script in stile Facebook | Facebookmania
thank you very good.
Is there a way to make a max length of carachters that could be inputted in each bit?
Pingback: Useful scripts Facebook inspired for web developers – woorkup.com
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?
Я практически никогда не сомневался в Вашем интеллектуальном уровне, но поймите, не все такие как Вы. :)
Nice work.
I have one question
1) How to remove/rest all elements in textboxlist using javascript.
- Sree
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!
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
Fabulous
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
Hey this is great
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 ????
Hello peoplw
i like to have sex with my girlfriend umang
probando desde uruguay
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?
I love it!