TextboxList meets Autocompletion
In my previous blogpost I explained how to extend TextboxList to add closing functionality via a link added to each box. But it was missing an important ingredient: autocompletion!
Again, all we have to do is extend the TextboxList class, override some methods, some events, and create some new ones (all prefixed by auto)
Click here to see Javascript code
var FacebookList = new Class({Extends: TextboxList,data: [],options: {onInputFocus: function() { this.autoShow(); },onInputBlur: function(el) {el.value = '';this.autoHide();},onBoxDispose: function(item) {this.autoFeed(item.$attributes.$text);},autocomplete: {'opacity': 0.8,'maxresults': 10,'minchars': 1}},initialize: function(element, autoholder, options) {arguments.callee.parent(element, options);this.autoholder = $(autoholder).set('opacity', this.options.autocomplete.opacity);this.autoresults = this.autoholder.getElement('ul');var children = this.autoresults.getElements('li');children.each(function(el) { this.add(el.innerHTML); }, this);},autoShow: function(search) {this.autoholder.setStyle('display', 'block');this.autoholder.getElements('*').setStyle('display', 'none');if(! search || ! search.trim() || (! search.length || search.length < this.options.autocomplete.minchars )){this.autoholder.getElement('.default').setStyle('display', 'block');this.resultsshown = false;} else {this.resultsshown = true;this.autoresults.setStyle('display', 'block').empty();this.data.filter(function(str) { return str ? str.test(search, 'i') : false; }).each(function(result, ti) {if(ti >= this.options.autocomplete.maxresults) return;var el = new Element('li').set('html', this.autoHighlight(result, search)).inject(this.autoresults);el.$attributes.$result = result;if(ti == 0) this.autoFocus(el);}, this);}},autoHighlight: function(html, highlight) {return html.replace(new RegExp(highlight, 'gi'), function(match) {return '<em>' + match + '</em>';});},autoHide: function() {this.resultsshown = false;this.autoholder.setStyle('display', 'none');},autoFocus: function(el) {if(! el) return;if(this.autocurrent) this.autocurrent.removeClass('auto-focus');this.autocurrent = el.addClass('auto-focus');},autoMove: function(direction) {if(!this.resultsshown) return;this.autoFocus(this.autocurrent['get' + (direction == 'up' ? 'Previous' : 'Next')]());},autoFeed: function(text) {if(this.data.indexOf(text) == -1)this.data.push(text);},autoAdd: function(el) {if(!el || ! el.$attributes.$result) return;this.add(el.$attributes.$result);delete this.data[this.data.indexOf(el.$attributes.$result)];this.autoHide();this.current.$attributes.$input.value = '';},createInput: function(options) {var li = arguments.callee.parent(options);var input = li.$attributes.$input;input.addEvents({'keydown': function(e) {e = new Event(e);this.dosearch = false;switch(e.code) {case Event.Keys.up: return this.autoMove('up');case Event.Keys.down: return this.autoMove('down');case Event.Keys.enter:this.autoAdd(this.autocurrent);this.autocurrent = false;this.autoenter = true;break;default: this.dosearch = true;}}.bind(this),'keyup': function() {if(this.dosearch) this.autoShow(input.value);}.bind(this)});input.addEvent(Browser.Engine.trident ? 'keydown' : 'keypress', function(e) {if(this.autoenter) new Event(e).stop();this.autoenter = false;}.bind(this));return li;},createBox: function(text, options) {var li = arguments.callee.parent(text, options);li.addEvents({'mouseenter': function() { this.addClass('bit-hover') },'mouseleave': function() { this.removeClass('bit-hover') }});li.adopt(new Element('a', {'href': '#','class': 'closebutton','events': {'click': function(e) {new Event(e).stop();if(! this.current) this.focus(this.maininput);this.dispose(li);}.bind(this)}}));li.$attributes.$text = text;return li;}});window.addEvent('domready', function() {// initvar tlist2 = new FacebookList('facebook-demo', 'facebook-auto');// fetch and feednew Request.JSON({'url': 'json.html', 'onComplete': function(j) {j.each(tlist2.autoFeed, tlist2);}}).send();});
It works by caching all the results from a JSON Request and feeding them to the autocompleter object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.
Another new feature is that you’ll be able to let it add boxes from the HTML directly:
<label>FacebookList input</label><input type="text" value="" id="facebook-demo" /><div id="facebook-auto"><div class="default">Type the name of an argentine writer you like</div><ul class="feed"><li>Jorge Luis Borges</li><li>Julio Cortazar</li></ul></div>
The constructor now takes new parameters to configure the autocompletion, like the minimum number of characters to trigger the dropdown, and more.
Changelog
- 0.1: initial release
- 0.2: added click support, removed $attributes use, code cleanup
Download
Click here to download the zip with code and examples
Tags: on January 12th, 2008
January 13th, 2008 at 6:34 am
[...] input’un aynısını yapmış. Gayet kullanılşı olmuş. Hatta başka bir örneğinde, bunu autocomplate özelliği ile de birleştirmiş ve tadından yenmez bir web kontrolüne [...]
January 13th, 2008 at 5:00 pm
This is brilliant.
Very slick and it seems to just work like you’d expect… Very neat, this definately has lots of potential.
January 13th, 2008 at 5:45 pm
[...] read more | digg story [...]
January 14th, 2008 at 5:55 am
thanks for such cool thing!
January 14th, 2008 at 8:43 am
[...] Guillermo me avisa de que ha terminado la versión con automplete de TextBoxList. [...]
January 15th, 2008 at 9:59 pm
[...] input’un aynısını yapmış. Gayet kullanılşı olmuş. Hatta başka bir örneğinde, bunu autocomplate özelliği ile de birleştirmiş ve tadından yenmez bir web kontrolüne [...]
January 16th, 2008 at 12:50 am
Of course the next step is to allow AJAX submissions for items not in the autocomplete list (on enter key).
Looks awesome!
January 16th, 2008 at 11:11 am
Very useful and smart autocompletion! Simple to implement !
But, How can I catch selected items after submitting form?
January 16th, 2008 at 4:50 pm
@Nuri
Call the update function when you submit your form.
January 17th, 2008 at 7:24 am
Very nice, I almost included it in my project away.
But it doesn’t seem to work when you click on one of the names in the drop down list, only when you use press enter. (Firefox 2.11, Windows XP)
Is this on purpose or something that was overlooked?
January 17th, 2008 at 7:54 am
[...] New! TextboxList with autocompletion [...]
January 17th, 2008 at 7:55 am
@James
It actually took me longer to post the update than to code it itself… I’ve just uploaded it for you to use it in your project !
January 18th, 2008 at 1:56 am
its very nice components with mooTools!
nice and very nice;)
January 18th, 2008 at 8:07 pm
Very nice - exactly what I’ve been looking for
I am trying to use this with an ajax response (so names are pulled in from db - any tips on how to do this would be a great help.
Thanks again
Nick
January 18th, 2008 at 8:42 pm
@Nick
This already works with an ajax -ajaj really, the last j being of json- response
January 19th, 2008 at 8:23 am
Yeh I thought it would - but can’t seem to get the autocomplete to list the items in the json.html file….. only the two listed initially
“Jorge Luis Borges
Julio Cortazar”
Thanks
Nick
January 20th, 2008 at 4:05 pm
[...] How to create a Facebook Textbox List with auto-compeltion [...]
January 21st, 2008 at 11:07 pm
This tool is GREAT!!!
I’m using it in my site, excellent stuff. thank you very much
[note] for other who’s going to use this, there’s a bug with the mootools function .removeClass(’classname’) ; which doesn’t work in IE7 as far as i know.
simply change to .className = ”;
i’m still trying to figure out how i can set some of this options, only if there were example.
January 23rd, 2008 at 3:43 am
I’m having the same problem as “Nick” (two posts above). I can’t get the json file to load. Everything looks same as site example. Just to be safe, I copied site JS and replaced in my JS file to no relief. Any thoughts?
Thanks.
p.s. Very cool. Just need it to work for me
January 23rd, 2008 at 5:28 am
Guys: if json.html doesn’t work for you, change the url to something that does. Remember it’s only intended as an example.
January 24th, 2008 at 4:10 am
Very Nice One..
I integrated it with PHP
The auto sujjest is working..
But i hav a doubt
how to submit the data??
sujjested result it is not in the text box
January 24th, 2008 at 5:03 am
@Renjith
Use the .update() method of your TextboxList instance when submitting the form.
January 25th, 2008 at 8:01 am
Che, buenísimo esto, yo tambien soy de Argentina, me parece que acá esta el talento!
January 25th, 2008 at 12:56 pm
Still cant get the update to fire. New to javascript
January 25th, 2008 at 1:10 pm
Had to create the instance outside the addEvent
var tlist2 = MsgFriendsList;
window.addEvent(’domready’, function() {
// init
tlist2 = new MsgFriendsList(’MESSAGEToUser’, ‘MsgFriends-auto’);
Changed the the update function to update a hidden input
update: function() {
$(’MESSAGEToNames’) = this.bits.getValues().join(this.options.separator);
//this.element.set(’value’, this.bits.getValues().join(this.options.separator));
// return this.bits.getValues().join(this.options.separator);
},
and then just called the tlist2.Update() in my forms onsubmit
I might of been wrong to do it this way, but it works
January 25th, 2008 at 1:16 pm
Missed out a .value after the $(’MESSAGEToNames’)
Now it works
January 27th, 2008 at 6:22 am
I’m looking this script for only Autocompletion, without the multiple select. But no other, I want THIS script. Any help? Thanks! I’m desperate!
January 27th, 2008 at 6:37 am
@Ignacio
It’s not worth using this script only for autocompletion.
January 27th, 2008 at 9:56 am
Thats ok, but the idea is use both, with a true or false, with multiple selects and without, you know what I mean
January 27th, 2008 at 10:07 am
@Ignacio
In that case, a good idea would be to add an option to limit the number of boxes you can add. I’ll probably add it soon
January 27th, 2008 at 11:12 am
Thanks
January 27th, 2008 at 5:26 pm
hello
I have changed the url many limes in test.js - - i keep getting the same error “j has no properties
[Break on this error] j.each(tlist2.autoFeed, tlist2);”
Please help
January 29th, 2008 at 1:49 am
Nick, I’m having the exact same problem. it occurs because it cannot seems to open json.html, so it cannot iterate through the values. I’m not proficient with Mootools so i don’t really know how things work over there, i’m a Prototypejs guy. I was hoping somebody who is more knowledgeable with Mootools could elaborate more.
Thanks
- EGBlue
January 30th, 2008 at 2:18 pm
Wicked. Have been looking for something like this. Saving it to my delicious right now!
February 2nd, 2008 at 8:05 pm
hi,
this is very cool. but it didn’t work for me either although i simply uploaded the sample code to one of my hosting directories.
it doesn’t seem to fetch the items from json.html.
all i get are:
“Jorge Luis Borges
Julio Cortazar”
is this a hosting-related problem?
does this application require any other software to be installed before?
any help?
thanks.
February 3rd, 2008 at 4:25 pm
@nicefella
ok. i fixed the problem by changing the name of json.html with json.asp and test.html with test.asp
now,
can s.o describe how i am going to use this “update” function to catch the items selected in the textboxlist.?
February 3rd, 2008 at 5:05 pm
[...] TextboxList meets Autocompletion-Using autosuggest/autocomplete in a search field to allow users add or remove terms using Mootools [...]
February 4th, 2008 at 7:54 am
I first tried the original code itself and then Ninja’s method, but, no luck.. I can’t get the values.. Any ideas..?
P.S: I am using ASP.NET & C#
February 4th, 2008 at 9:14 am
In ie7 it’s a error.
When you put 2 letters in a text see the next error:
The objecto not accept de property ot method.
Thank u and excuse my poor english.
February 4th, 2008 at 2:30 pm
I was able to get it working simply by renaming the file from json.html to json.php, similar to nicefella’s method. Make sure you put it on your server or localhost. My suggestion is, since it acts like a dropdown select, in the JSON to have Title, and Value. they don’t have to be the same. So when clicked .update() you get the values, while the Titles are those that being displayed on the actual list.
February 4th, 2008 at 2:48 pm
@EGBlue, can you send me the working sample code?
ozkana {at] gmail (dot} com
February 4th, 2008 at 8:55 pm
@Guillermo Rauch
Do you mind if i’ll start on the process of translating your code into Prototype?
Since Prototype is not compatible with Mootools, I cannot use your script, I really like it though and already have ‘pimped’ it.
I would like to know if I can translate it into Prototype, commenting that it is based on your script of course.
Thanks
- EGBlue
February 6th, 2008 at 9:43 pm
@EGBlue
If you have successfully translated the nice guillermo code into prototype, you re welcome
thanks
sapporro (at] gmail (dot] com
February 7th, 2008 at 9:01 am
[...] 20) TextboxList meets Autocompletion-Using autosuggest/autocomplete in a search field to allow users add or remove terms using Mootools Library. [...]
February 11th, 2008 at 12:31 pm
very nice autocomplete.
how can i get more than one autocomlete field on a single page to work? i cant get it.
thx
February 11th, 2008 at 5:05 pm
[...] is the Prototype version of the extended script by Guillermo Rauch. As with the previous script, this script has been converted and operates like the original. An [...]
February 12th, 2008 at 2:34 am
Hey guys, for those who are interested. A ported version of this great script into PrototypeJS can be found at http://www.interiders.com
February 15th, 2008 at 11:23 am
[...] Rauch set out to build something similar and he did a very good job of mimicking this behavior using MooTools v1.2: While working on my big and exciting new project, I decided to include an input that resembles the [...]
February 15th, 2008 at 12:31 pm
When running it locally, i get this error on test.js, line 170
j has no properties
running it on apache works
February 15th, 2008 at 4:08 pm
[...] Rauch has built a very useful input box script for easily adding multiple recipients for messaging purposes. Utilizing Mootools v1.2 it is only [...]
February 15th, 2008 at 4:42 pm
[...] LINK [...]
February 15th, 2008 at 5:40 pm
Pretty slick… it’s missing some of the features of the Facebook control, though:
- When you hit the up and down arrows in your, you’re not canceling the event, so your cursor moves around in the text box
- Facebook’s searching is done with a binary search, you’re using a sequential search… you may notice some slow down after like 5000 elements
- Facebook’s version will give you a scrollbar if more than 10 results come back. You can even hit the down arrow with nothing typed in, and it will give you the whole list. The results are rendered on a timeout so it remains quick and responsive even when enumerating thousands of results.
I’m impressed, though!
February 15th, 2008 at 5:41 pm
[...] Rauch set out to build something similar and he did a very good job of mimicking this behavior using MooTools v1.2: While working on my big and exciting new project, I decided to include an input that resembles the [...]
February 15th, 2008 at 5:49 pm
@Marcel
Really interesting suggestions.. I guess I’ll have to release a new version then !
Thanks
February 15th, 2008 at 6:34 pm
[...] here is the author page http://devthought.com/textboxlist-meets-autocompletion/ [...]
February 16th, 2008 at 6:31 am
Hi,
I like your code style : var that = this;
Anyway thanks for this. It’s a very nice one. I’ll adapted it to accept new values with other css classname for them.
I’ll keep you in touch.
Devalnor
February 16th, 2008 at 4:32 pm
[...] http://devthought.com/textboxlist-meets-autocompletion/ addthis_url = ‘http%3A%2F%2Fdavidwalsh.name%2Ffancy-zoom-icon-design-php-desktop-application-php-geocoding-google-maps-api-linkedin-autocomplete%2F’; addthis_title = ‘Weekend+Links+-+FancyZoom%2C+Icon+Design%2C+PHP+Desktop+Applications%2C+PHP+Geocoding+Using+Google+Maps+API%2C+LinkedIn%2C+TextboxList+AutoCompletion’; addthis_pub = ”; [...]
February 16th, 2008 at 8:53 pm
@Marcel
Nice suggestions. How exactly can you employ Binary Search though in that kind of script?
Let’s say you sort it by first name, and using Binary Search you are able to find the first name. Then you use that index to start a sequential search from that point on? Assuming you figure that out, how do you then use it for Last name?
Obviously such a solution would be great, i’m just not sure how it can be employ.
Thanks in advanced.
February 17th, 2008 at 7:58 am
[...] Guillermo Rauch set out to build something similar and he did a very good job of mimicking this behavior using MooTools v1.2: [...]
February 17th, 2008 at 11:22 am
[...] just read about an autocompletion input mechanism in mootools like that used in facebook. This is a really cool way to add names from a list to your query or [...]
February 17th, 2008 at 3:13 pm
very nice script.
However, I am trying to insert the selected options into the DB and can’t get it work. What do I need to do?
working with php/mysql
thanks in advance
February 18th, 2008 at 6:32 pm
I still can’t figure out how to pull values using the update function.
I set the onsubmit=”tlist2.update()” for a button in my form, but it doesn’t do anything. It seems to be something simple that I’m missing. Could anybody please shed some light?
February 22nd, 2008 at 6:27 am
The autocomplete is a very wonderful tool. However, the problem is adding a value that does not exist in the autocomplete list to the input box. if for example Im using it for a intramail whereby users can send mails to each other within a site and the autocomplete lists out users who are already in the member’s friend list, what happens if he also wants to send to a member who is not in his friend’s list? I was thinnking thst typing in the value and pressing enter will do the trick but it doesnt. Tested on IE7 and Opera9
February 23rd, 2008 at 4:20 pm
I have the same issue like Brian. However, it seems there is no support or advice here. If someone of you knows the answer could you please help us. I believe many people here have the same problem.
February 24th, 2008 at 10:42 pm
i tired using the update function, it works for default values, but after trying to input something, list2.bits gets whatever was in the autocomplete list, instead of what is in the textboxlist. Any solution?
February 24th, 2008 at 11:04 pm
nevermind i got update to work.
February 25th, 2008 at 4:12 pm
Does anyone have an example of how to use update function (new to java…). Any example will do, I’m sure I can figure it out, just don’t know where to start on this one.
Thanks!
February 25th, 2008 at 4:14 pm
Hey All,
Love the script. Yet, I have a problem. I am new to Java and I have no idea how to ‘call the update()’ function, does anyone have an example of how this is done? Sure I can figure it out if I just can see how it’s done.
Thanks!
February 27th, 2008 at 4:08 pm
[...] TextboxList meets Autocompletion [...]
February 29th, 2008 at 8:06 am
[...] Facebook Style Input BoxThe approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)” [...]
February 29th, 2008 at 8:06 am
[...] Facebook Style Input BoxThe approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)” [...]
February 29th, 2008 at 9:50 am
Hi I am very much interested in this work . I am from a java background and we use DWR not JSON(and I am not familiar with JSON ). I need to understand this piece of code that I have pasted here.
new Request.JSON({’url’: ‘json.html’, ‘onComplete’:
I have also downloaded the sample demo and found that it contained a file named “json.html’ which contained a string array. How can I integrate this with DWR? or else If I am going to use jason wuts the step that I need to take to integrate it with my code . CURRENTLY i AM GETTING THE DB DATA VIA DWR TO MY CLIENT SIDE AND I AM ABLE TO PRINT THE RELEVANT DATA USING “alerts”"”
March 1st, 2008 at 4:25 pm
[...] Facebook benzeri otomatik tamamlama scripti. Bağlantı [...]
March 3rd, 2008 at 1:40 pm
[...] an input that resembles the famous Apple Mail to: textfield? It would be something similar to Facebook List Input. Basically, it’s a group of pieces or bits, that can be either a box or an input. The user is [...]
March 6th, 2008 at 1:53 pm
Great script, I will for shure use it in my future projects.
March 12th, 2008 at 7:24 pm
is there anyway to only allow only one name to be submitted, instead of an unlimited amount?
March 19th, 2008 at 7:16 pm
[...] Facebook TextboxList with Autocompletion. that’s a pretty good trick of having the input box inside a fake input box. [...]
March 23rd, 2008 at 11:52 pm
[...] YUI Autocomplete AJAX Select Drowdown with ID AutoCompleter Tutorial - jQuery(Ajax)/PHP/MySQL Yahoo! AutoComplete jQuery Autocomplete Mod FaceBoox style autosuggest with jQuery Implementing AJAX Suggest and Autocomplete Ajax autosuggest/autocomplete from database Ajax Auto Suggest v.2 Facebook List TextboxList with AutoCompletion Proto!MultiSelect 0.2 TextboxList meets Autocompletion [...]
March 24th, 2008 at 7:17 am
i made my own list for autocomplete, but i want that box be empty at first - how can i ?
March 26th, 2008 at 2:33 pm
Hi. This is wonderful stuff. I’ve used this in one of my projects and has proved a great success. But like everything, it has some issues. Here’s what it is..
I’m updating the dropdown list, i.e. fetchfile on every keyword selection. e.g. If i search abc and get 10 results. I select one of them. Then i search again (type again). Now i’m making a new JSONString which returns say 2 results. But my drop down is showing 9 keywords options.
In short, the issue is i want to update the drop down list on every hit. The JSONString i’m returning is updated but the drop down list is not..
can the authors or anyone else please help me out on this.. Kinda urgent matter.
Many thanks.
March 29th, 2008 at 9:58 am
Hi,
Could anybody post a working example of how to get the data posted? What needs to be changed, and where?
Many thanks
March 30th, 2008 at 12:16 pm
mega slick…loong live ASP.NET
March 30th, 2008 at 12:20 pm
Oppps..ditch that asp.net part in my comment, it was a stupid copy paste error….
Thanks for sharing, this is super cool
March 30th, 2008 at 5:26 pm
Hello everyone!
Where do i put the update() function!? People say they figured it out but don’t post the solution!
March 30th, 2008 at 6:40 pm
after several hours of fustration i figured it out ! (Using ninja’s method) but it was even easier. I left the update function as is!
// Like ninja said. Placing tlist2 outside the addEvent.
var tlist2 = BandsList;
window.addEvent(’domready’, function() {
tlist2 = new BandsList(’bands’, ‘bands-auto’);
// fetch and feed
new Request.JSON({’url’: ‘json.php’, ‘onComplete’: function(j) {
j.each(tlist2.autoFeed, tlist2);
}}).send();
});
//// === in the HTML form ==== ///
March 30th, 2008 at 6:41 pm
after several hours of fustration i figured it out ! (Using ninja’s method) but it was even easier. I left the update function as is!
// Like ninja said. Placing tlist2 outside the addEvent.
var tlist2 = BandsList;
window.addEvent(’domready’, function() {
tlist2 = new BandsList(’bands’, ‘bands-auto’);
// fetch and feed
new Request.JSON({’url’: ‘json.php’, ‘onComplete’: function(j) {
j.each(tlist2.autoFeed, tlist2);
}}).send();
});
//// === in the HTML form ==== ///
<input type=”submit” onClick=”javascript:tlist2.update();” value=”Submit” />
March 31st, 2008 at 2:36 pm
I’m with JP. I’m not sure where to put the update function. So if someone could explain it that would great!
Thanks.
April 3rd, 2008 at 10:31 am
Here is an example code to put in the domready :
window.addEvent(’domready’, function() {
var tlist2 = new FacebookList(’facebook-demo’, ‘facebook-auto’);
// fetch and feed
new Request.JSON({’url’: ‘json.html’, ‘onComplete’: function(j) {
j.each(tlist2.autoFeed, tlist2);
}}).send();
$(’facebook-form’).addEvent(’submit’, function(){ //facebook-form is the form id
tlist2.update();
})
});
One problem remaining on IE :
pressing enter while the autocomplete list opened submit the form instead of just adding the list item like the Fx / Opera behavior
April 12th, 2008 at 2:57 pm
loco, no se cuanto sabes de ajax… pero me parece que de literatura argentina sabes bastante
April 12th, 2008 at 3:08 pm
nice and usefull
April 15th, 2008 at 12:03 pm
[...] Facebook Style Input BoxThe approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)” [...]
April 16th, 2008 at 9:12 am
[...] text : à la Facebook, ou [...]
April 16th, 2008 at 11:25 am
Very Cool. Any jQuery implementation of this, or something similar?
April 16th, 2008 at 4:54 pm
[...] Facebook Style Input Box Скрипт комбинирует метод автодополнения и добавление нескольких адресатов к сообщению, такой инструмент используется в Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)” [...]
April 16th, 2008 at 8:38 pm
Excellent work by the way. Love it. Ive noticed though that it isnt populating any kind of hidden fields so that you can POST the information with a submit button? Is this something you are looking to add?
April 16th, 2008 at 8:45 pm
@Craig
The update() method takes care of that. You can either call it yourself or add it to the blur() method, which is what the upcoming version does (since so many people asked).
Nice website, by the way.
April 18th, 2008 at 11:37 am
[...] TextboxList meets Autocompletion (tags: JavaScript Forms Ajax web2.0 JQuery) [...]
April 20th, 2008 at 1:19 pm
[...] Facebook Style Input Box The approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)” [...]
April 21st, 2008 at 6:26 am
[...] 一款Facebook风格的自动完成输入框 [...]
April 21st, 2008 at 6:12 pm
Great idea to improve the feedback for the user. Beside that thank you the possibility to get the source coude for free
Ralph
May 1st, 2008 at 3:34 pm
Thanks for the script
May 5th, 2008 at 2:23 am
[...] Facebook Style Input Box The approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)” [...]
May 13th, 2008 at 6:02 pm
[...] TextboxList / Mootools [...]
May 14th, 2008 at 10:53 pm
That’s a great script. Thanks!!
Well, I met a problem here that I can’t input any other name but only the name from file.
How can I submit the name from either the list file or from the input by myself?
Thanks for the help.
Rainmore
May 14th, 2008 at 11:06 pm
After going through all the notes, I summary some Q&A hereAfter going through all the notes, I summary some Q&A here:
Q:The script doesn’t work on dropdown list? Or No dropdown list ?
A: Please change the following file name to .php, .asp or .jsp rather than .html
Eg:
json.html ->json.php
test.html -> test.php
Q: Can’t upload the list?
A: 2 steps
1. Modify test.php (if you had change the extension of test.html) or test.html
a. Add name and id to the form as “facebook-form”;
b. Add name to the input where id = “facebook-demo”;
c. Add submit button within the form
2. Add a script to the file test.js at line 172 or add the script within the funciton window.addEvent(‘domread’,function()) as
$(’facebook-form’).addEvent(’submit’,function(){ // facebook-form is the form id
tlist2.update();
})
After the change the function should be:
window.addEvent(’domready’, function() {
// init
var tlist2 = new FacebookList(’facebook-demo’, ‘facebook-auto’);
// fetch and feed
new Request.JSON({’url’: ‘namelist.php’, ‘onComplete’: function(j) {
j.each(tlist2.autoFeed, tlist2);
}}).send();
$(’facebook-form’).addEvent(’submit’,function(){ // facebook-form is the form id
tlist2.update();
})
});
HTH!!!!
May 18th, 2008 at 4:50 pm
For the next version it would be great if you could use a json file that has IDs associated with values, like: ["32":Sylvia Molloy","12":"Julio Cortazar".....] And store just the IDs in the input element. That would be VERY useful if you need to get the ID of the selected objects when you process the form.
May 23rd, 2008 at 8:46 pm
Will there be a version with Keyboard Support?
June 3rd, 2008 at 2:50 am
[...] form autocomplete code, named TextboxList, is built on Mootools javascript framework and works just like the Facebook form inputs that are [...]
June 5th, 2008 at 10:18 pm
Great Job!
What is this license?
June 5th, 2008 at 10:32 pm
Hello everyone
Is there an article only on this cute auto-complete ?
since i don’t need the TextboxList
June 12th, 2008 at 2:32 pm
I donwload the code and i have a problem with test.js
Just change one line of code
j.each(tlist2.autoFeed, tlist2);
chacnge to
var j = j.each(tlist2.autoFeed, tlist2);
June 22nd, 2008 at 5:42 am
Hey this is really cool thanks, I will use this
July 2nd, 2008 at 4:44 pm
is it possible to link this to a access db with VB script does any one know?
July 3rd, 2008 at 12:08 am
i tried this using mootools 1.2 (non-beta) but it wasn’t working. what seems to be the problem?
July 7th, 2008 at 8:31 am
Hey,
I’m also interested in getting this thing to work with moo 1.2!
Any plans for a soon 0.3 ?
July 8th, 2008 at 10:46 pm
I know….compatible version for 1.2 would be very nice. I LIKE !!!
July 15th, 2008 at 11:38 am
[...] http://devthought.com/textboxlist-meets-autocompletion/ Tags: form, mootools if (typeof window.Delicious == “undefined”) window.Delicious = {}; [...]
July 18th, 2008 at 2:38 am
[...] Facebook Style Input Box The approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)” [...]