Friday, February 15th, 2008

Facebook Style Input Box

Category: Ajax, MooTools, Prototype

<>p>If you used Facebook on a regularly basis, you’ve probably come across their cool autocomplete method of adding multiple recipients to messages. For those that haven’t seen it, here’s a pic:

Guillermo 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 famous Apple Mail to: textfield. 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)

I created my own, MooTools 1.2 compatible, in just 5kb. It’s not only small, but also really frexible! Here are some notes of the creation process and how to implement it in your own projects.

Well, the folks at InteRiders wanted to get in on this Facebook goodness so they created a Prototype version of this control.

This 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 extended and upgraded version will be posted later on this week, if you have any comments or requests, please post them and I will try to include all the requested features in the upcoming Proto release.

This is a very nice variation of the autocomplete metaphor and MooTools and Prototype developers can now leverage this enhanced functionality.

Related Content:

Posted by Rey Bango at 9:22 am
24 Comments

++++-
4.1 rating from 38 votes

24 Comments »

Comments feed TrackBack URI

Very cool! I’ve been hoping someone would implement that technique.

Comment by ceejayoz — February 15, 2008

Awesome implementation, lightweight and attractive. Definitely beats a normal input, I’ll have to use this in future web apps.

Comment by Andy Kant — February 15, 2008

On the prototype version, clicking a name wont select it. I have to hit enter in FF2. Weird

Comment by Jigs — February 15, 2008

Both version are very slick. They run beautifully in Firefox 2. However, they both easily break in IE6 and IE7.

IE6:
1. Type a short string like “s” into the Facebook input.
2. Select an item in the list such that your cursor is on the very top or bottom of an item.
3. Nothing happens!

It appears that the hotspot includes only the text and is not expanded to fit the whole container. This is only an issue in IE6, for me.

IE7:
1. Type a short string like “s” into the Facebook input.
2. Select an item in the list.
3. Type another short string.
4. Only 1 result is returned regardless of the number of true matching results.

Style
It would also be nice if the “X” area included the entirety of the right edge of the item. Right now, you must be rather precise in order to remove a contact from the list.

Stupid Preference
Because the second image in this post is also a link to the demo, it would make sense for the first image in the post to also be a link to that demo.

Comment by EndangeredMassa — February 15, 2008

This can be done without any javascript framework. Just have to deal with createRange & absolute div positions.

Comment by bollywood — February 15, 2008

@bollywood: I’m sure it can, as can many other UI controls. The libs just make it easier for some developers If you build one using straight JS, please let me know and I’ll be glad to list it up here. What would be really cool is if you did a tutorial-style post showing how to build one. That would really get some attention.

Comment by Rey Bango — February 15, 2008

I noticed that the MooTools and Prototype versions are different from Facebooks implementation. With Facebook, the matching is only done on the start of each word, whereas the others do the matching anywhere in a word.

As long as your search list is relatively short, this shouldn’t be an issue, but could potentially bring back lots of results.

I’m not even sure that “anywhere in a word” is what I would consider expected behavior, since most autocomplete implementations that I’ve seen filter from the start of a word.

Anyway, these are pretty cool components.

Thanks!

Comment by Kiliman — February 15, 2008

@Kiliman
It really depends on the implementation… for my app, it was a good idea to search the whole words. It’s easily extensible, and you can also tweak how many results to show (autocomplete:maxresults property), which means it shouldn’t be an issue if there’re many results.

@Endangered
My testing on IE was pretty basic since I don’t have access to it. Thanks for the bug reproduction, I’ll have it fixed soon.
And about the styling, this is meant to be an example.. you can always add more padding to that anchor to achieve the effect you mention.

Comment by Appletalk — February 15, 2008

@EndangeredMassa
I was trying to replicate your IE7 error, however, was not successful. FYI, if a value is already selected, it will not display it on the list. Not sure that was the case, I just wasn’t able to get the error to occur during my checks. would appreciate if you could try it again and point me to the exact way of replicating it.
Thanks!

Comment by EGBlue — February 15, 2008

@EGBlue:
I was unable to reproduce the error at home. It must have been a quirk with my work machine install or settings.

The issue was definitely not related to the fact that items no longer show up in a list after they have been selected, though.

Comment by EndangeredMassa — February 15, 2008

@EGBlue:
I did found it.

IE 7.0.6000.16609 on Windows Vista
Using http://devthought.com/wp-content/articles/autocompletelist/test.html
1. Type ‘a’ into the facebook input field. You will see a list of 10 names or so.
2. Select one of them, say “Olga Orozco”.
3. Type ‘a’ again. You will see a list of only 1 name, in my case “Sylvia Molloy”. I should see a list of 9 names at this point.

Using http://www.interiders.com/wp-content/demos/ProtoAutocompleteList/test.html
After selecting the first item, I can no longer select further items. I still see the proper list, but the click event is not working properly.

Comment by EndangeredMassa — February 15, 2008

Hi !

2 weeks ago, I made auto-suggest facebook like for jQuery : http://web2ajax.fr/examples/facebook_searchengine/

Rey : Perhaps you can add reference to my work in your post :)

In all cases, beautiful work Guillaume !

Comment by guiltouf — February 16, 2008

@Rey Bango,
Sure, next time, when I make such stuff, I will inform ajaxian to get a attention.

One more, thing delete key is not working on above code. In Facebook when you press delete key on focused record, it delete focused record. That can be easily done (with event properties like which,keycode,keychar) by event lister or eventbind.

Comment by bollywood — February 16, 2008

“One more, thing delete key is not working on above code.”

It works if you first select the name you want to delete with your mouse. Which isn’t ideal, but it does work. I would say this is a neat concept but needs some work for implementation.

And whoever complained about it searching the middle of words… that really has very little to do with the UI element, that’s more how the back end handles the requests the UI element is sending it.

Comment by Trevor — February 17, 2008

http://www.interiders.com/2008/02/18/protomultiselect-02/

New version has been released.

Comment by EGBlue — February 18, 2008

On Firefox2 and IE7, using the new version (http://www.interiders.com/2008/02/18/protomultiselect-02/), you can select the same name multiple times. The name isn’t removed from the list when it is selected, it is just moved somewhere else in the list. The name can appear again at the bottom or in other locations.

Comment by EndangeredMassa — February 19, 2008

Here is a jquery port that uses Auto.Complete from bassistance.de

http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

Comment by williamukoh — July 7, 2008

Here is a Scriptaculous implementation that extends the AutoComplete class in controls.js

http://devblog.rorcraft.com/2008/8/13/the-facebook-autocomplete-address-to-field

Demo:
http://www.rorcraft.com/autocomplete_advanced_local/

Comment by mancjew — August 24, 2008

I have a need for just the text box with the related styles. I don’t need the autocomplete.

I basically want to pass the input box a name at runtime and have it display as many names as the use selects from another control.

Any advice on which portion of the code I can use? Much appeciated.

Comment by jimmy3times — April 2, 2009

Any idea how to programatically add an entry to the textbox? or how to reinitialize it?

Comment by jimmy3times — April 5, 2009

Nice work guys.. i was looking for such a script for a while ;)

Comment by bcmweb — July 27, 2009

I made an jQuery adaptation of the textboxlist plugin, named SmartTextBox. Documentation, demo and downloads are available from this page : http://wayofspark.com/projects/smarttextbox/

Comment by wayofspark — August 13, 2010

Hi All,

There’s a GWT native implementation of this component on http://code.google.com/p/advanced-suggest-select-box/

I found it in the first links by typing advanced suggest box. It works really fine, maybe there’s a way to extract the js code?

it supports icons in addition to having the facebook style features, I think it’s worth looking at it

Comment by zhamdi — June 8, 2011

Cool plugin! Is there a possibility to also add some new tags and to commit they to server?

Comment by dnx — August 6, 2011

Leave a comment

You must be logged in to post a comment.