Friday, February 15th, 2008
Facebook Style Input Box
Category: Ajax, MooTools
, Prototype
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:
- How to verify the input of special characters
Here's a quick tip to verify the input of special characters in text boxes on... - Facebook Messages launched to integrate e-mail with social network
Facebook has introduced a service to combine e-mail, text and instant messaging, called Facebook... - Social networking security still a gray area for some customers
While there are many companies today that have embraced the use of social networking sites, there are still some that are skeptical. No matter how... - VB code: Forms downloads
These VB code snippets help developers customize forms such as ComboBoxes, TextBoxes and MSFlexGrids. Our newest category covers... - Return Search Results on the Web Without Ugly Relevancy Boxes (Another Way)
4.1 rating from 28 votes
Very cool! I’ve been hoping someone would implement that technique.
Awesome implementation, lightweight and attractive. Definitely beats a normal input, I’ll have to use this in future web apps.
On the prototype version, clicking a name wont select it. I have to hit enter in FF2. Weird
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.
This can be done without any javascript framework. Just have to deal with createRange & absolute div positions.
@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.
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!
@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.
@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!
@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.
@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.
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 !
@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.
“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.
http://www.interiders.com/2008/02/18/protomultiselect-02/
New version has been released.
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.
Here is a jquery port that uses Auto.Complete from bassistance.de
http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/
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/
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.
Any idea how to programatically add an entry to the textbox? or how to reinitialize it?
Nice work guys.. i was looking for such a script for a while ;)
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/
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
Cool plugin! Is there a possibility to also add some new tags and to commit they to server?