TextboxList meets Autocompletion

TextboxList Autocompletion

Demo here

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

  1. var FacebookList = new Class({
  2.  
  3. Extends: TextboxList,
  4.  
  5. data: [],
  6.  
  7. options: {
  8. onInputFocus: function() { this.autoShow(); },
  9. onInputBlur: function(el) {
  10. el.value = '';
  11. this.autoHide();
  12. },
  13. onBoxDispose: function(item) {
  14. this.autoFeed(item.$attributes.$text);
  15. },
  16. autocomplete: {
  17. 'opacity': 0.8,
  18. 'maxresults': 10,
  19. 'minchars': 1
  20. }
  21. },
  22.  
  23. initialize: function(element, autoholder, options) {
  24. arguments.callee.parent(element, options);
  25. this.autoholder = $(autoholder).set('opacity', this.options.autocomplete.opacity);
  26. this.autoresults = this.autoholder.getElement('ul');
  27. var children = this.autoresults.getElements('li');
  28. children.each(function(el) { this.add(el.innerHTML); }, this);
  29. },
  30.  
  31. autoShow: function(search) {
  32. this.autoholder.setStyle('display', 'block');
  33. this.autoholder.getElements('*').setStyle('display', 'none');
  34. if(! search || ! search.trim() || (! search.length || search.length < this.options.autocomplete.minchars ))
  35. {
  36. this.autoholder.getElement('.default').setStyle('display', 'block');
  37. this.resultsshown = false;
  38. } else {
  39. this.resultsshown = true;
  40. this.autoresults.setStyle('display', 'block').empty();
  41. this.data.filter(function(str) { return str ? str.test(search, 'i') : false; }).each(function(result, ti) {
  42. if(ti >= this.options.autocomplete.maxresults) return;
  43. var el = new Element('li').set('html', this.autoHighlight(result, search)).inject(this.autoresults);
  44. el.$attributes.$result = result;
  45. if(ti == 0) this.autoFocus(el);
  46. }, this);
  47. }
  48. },
  49.  
  50. autoHighlight: function(html, highlight) {
  51. return html.replace(new RegExp(highlight, 'gi'), function(match) {
  52. return '<em>' + match + '</em>';
  53. });
  54. },
  55.  
  56. autoHide: function() {
  57. this.resultsshown = false;
  58. this.autoholder.setStyle('display', 'none');
  59. },
  60.  
  61. autoFocus: function(el) {
  62. if(! el) return;
  63. if(this.autocurrent) this.autocurrent.removeClass('auto-focus');
  64. this.autocurrent = el.addClass('auto-focus');
  65. },
  66.  
  67. autoMove: function(direction) {
  68. if(!this.resultsshown) return;
  69. this.autoFocus(this.autocurrent['get' + (direction == 'up' ? 'Previous' : 'Next')]());
  70. },
  71.  
  72. autoFeed: function(text) {
  73. if(this.data.indexOf(text) == -1)
  74. this.data.push(text);
  75. },
  76.  
  77. autoAdd: function(el) {
  78. if(!el || ! el.$attributes.$result) return;
  79. this.add(el.$attributes.$result);
  80. delete this.data[this.data.indexOf(el.$attributes.$result)];
  81. this.autoHide();
  82. this.current.$attributes.$input.value = '';
  83. },
  84.  
  85. createInput: function(options) {
  86. var li = arguments.callee.parent(options);
  87. var input = li.$attributes.$input;
  88. input.addEvents({
  89. 'keydown': function(e) {
  90. e = new Event(e);
  91. this.dosearch = false;
  92. switch(e.code) {
  93. case Event.Keys.up: return this.autoMove('up');
  94. case Event.Keys.down: return this.autoMove('down');
  95. case Event.Keys.enter:
  96. this.autoAdd(this.autocurrent);
  97. this.autocurrent = false;
  98. this.autoenter = true;
  99. break;
  100. default: this.dosearch = true;
  101. }
  102. }.bind(this),
  103. 'keyup': function() {
  104. if(this.dosearch) this.autoShow(input.value);
  105. }.bind(this)
  106. });
  107. input.addEvent(Browser.Engine.trident ? 'keydown' : 'keypress', function(e) {
  108. if(this.autoenter) new Event(e).stop();
  109. this.autoenter = false;
  110. }.bind(this));
  111. return li;
  112. },
  113.  
  114. createBox: function(text, options) {
  115. var li = arguments.callee.parent(text, options);
  116. li.addEvents({
  117. 'mouseenter': function() { this.addClass('bit-hover') },
  118. 'mouseleave': function() { this.removeClass('bit-hover') }
  119. });
  120. li.adopt(new Element('a', {
  121. 'href': '#',
  122. 'class': 'closebutton',
  123. 'events': {
  124. 'click': function(e) {
  125. new Event(e).stop();
  126. if(! this.current) this.focus(this.maininput);
  127. this.dispose(li);
  128. }.bind(this)
  129. }
  130. }));
  131. li.$attributes.$text = text;
  132. return li;
  133. }
  134.  
  135. });
  136.  
  137. window.addEvent('domready', function() {
  138. // init
  139. var tlist2 = new FacebookList('facebook-demo', 'facebook-auto');
  140.  
  141. // fetch and feed
  142. new Request.JSON({'url': 'json.html', 'onComplete': function(j) {
  143. j.each(tlist2.autoFeed, tlist2);
  144. }}).send();
  145. });

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:

Click here to see HTML code

  1. <label>FacebookList input</label>
  2. <input type="text" value="" id="facebook-demo" />
  3. <div id="facebook-auto">
  4. <div class="default">Type the name of an argentine writer you like</div>
  5. <ul class="feed">
  6. <li>Jorge Luis Borges</li>
  7. <li>Julio Cortazar</li>
  8. </ul>
  9. </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: Article, Browsers, CSS, Javascript, Project on January 12th, 2008

184 Responses to “TextboxList meets Autocompletion”

  1. Facebook Tarzı Dinamik Input - katodivaihe, on January 13th, 2008 at 6:34 am Said:

    [...] 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 [...]

  2. David, on January 13th, 2008 at 5:00 pm Said:

    This is brilliant.

    Very slick and it seems to just work like you’d expect… Very neat, this definately has lots of potential.

  3. Fanciest Javascript Autocompletion!, on January 13th, 2008 at 5:45 pm Said:

    [...] read more | digg story [...]

  4. Ahmed, on January 14th, 2008 at 5:55 am Said:

    thanks for such cool thing!

  5. TextboxList + Autocomplete, los textbox del iPhone en tu web | aNieto2K, on January 14th, 2008 at 8:43 am Said:

    [...] Guillermo me avisa de que ha terminado la versión con automplete de TextBoxList. [...]

  6. Sanallinkler Bilgi ArÅŸivi » Blog Archive » Facebook Tarzı Dinamik Input, on January 15th, 2008 at 9:59 pm Said:

    [...] 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 [...]

  7. Jacob, on January 16th, 2008 at 12:50 am Said:

    Of course the next step is to allow AJAX submissions for items not in the autocomplete list (on enter key).

    Looks awesome!

  8. Nuri Akman, on January 16th, 2008 at 11:11 am Said:

    Very useful and smart autocompletion! Simple to implement !

    But, How can I catch selected items after submitting form?

  9. Guillermo Rauch, on January 16th, 2008 at 4:50 pm Said:

    @Nuri
    Call the update function when you submit your form.

  10. James Pearson, on January 17th, 2008 at 7:24 am Said:

    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?

  11. Devthought - Guillermo Rauch’s Blog » TextboxList: Fancy Facebook-Like dynamic inputs!, on January 17th, 2008 at 7:54 am Said:

    [...] New! TextboxList with autocompletion [...]

  12. Guillermo Rauch, on January 17th, 2008 at 7:55 am Said:

    @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 !

  13. Ali Pour Zahmatkesh, on January 18th, 2008 at 1:56 am Said:

    its very nice components with mooTools!
    nice and very nice;)

  14. Nick, on January 18th, 2008 at 8:07 pm Said:

    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

  15. Guillermo Rauch, on January 18th, 2008 at 8:42 pm Said:

    @Nick
    This already works with an ajax -ajaj really, the last j being of json- response

  16. Nick Light, on January 19th, 2008 at 8:23 am Said:

    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

  17. Richard’s Blog » Blog Archive » Javascript for Beginners, on January 20th, 2008 at 4:05 pm Said:

    [...] How to create a Facebook Textbox List with auto-compeltion  [...]

  18. HiTMaN, on January 21st, 2008 at 11:07 pm Said:

    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.

  19. sdor, on January 23rd, 2008 at 3:43 am Said:

    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 :-)

  20. Guillermo Rauch, on January 23rd, 2008 at 5:28 am Said:

    Guys: if json.html doesn’t work for you, change the url to something that does. Remember it’s only intended as an example.

  21. Renjith, on January 24th, 2008 at 4:10 am Said:

    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

  22. Guillermo Rauch, on January 24th, 2008 at 5:03 am Said:

    @Renjith
    Use the .update() method of your TextboxList instance when submitting the form.

  23. Ignacio, on January 25th, 2008 at 8:01 am Said:

    Che, buenísimo esto, yo tambien soy de Argentina, me parece que acá esta el talento!

  24. Zach, on January 25th, 2008 at 12:56 pm Said:

    Still cant get the update to fire. New to javascript

  25. Ninja, on January 25th, 2008 at 1:10 pm Said:

    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

  26. Ninja, on January 25th, 2008 at 1:16 pm Said:

    Missed out a .value after the $(’MESSAGEToNames’)

    Now it works

  27. Ignacio, on January 27th, 2008 at 6:22 am Said:

    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!

  28. Guillermo Rauch, on January 27th, 2008 at 6:37 am Said:

    @Ignacio
    It’s not worth using this script only for autocompletion.

  29. Ignacio, on January 27th, 2008 at 9:56 am Said:

    Thats ok, but the idea is use both, with a true or false, with multiple selects and without, you know what I mean

  30. Guillermo Rauch, on January 27th, 2008 at 10:07 am Said:

    @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

  31. Ignacio, on January 27th, 2008 at 11:12 am Said:

    Thanks

  32. Nick, on January 27th, 2008 at 5:26 pm Said:

    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

  33. EGBlue, on January 29th, 2008 at 1:49 am Said:

    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

  34. Foxinni - Wordpress Designer, on January 30th, 2008 at 2:18 pm Said:

    Wicked. Have been looking for something like this. Saving it to my delicious right now!

  35. nicefella, on February 2nd, 2008 at 8:05 pm Said:

    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.

  36. nicefella, on February 3rd, 2008 at 4:25 pm Said:

    @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.?

  37. Best of Ajax, Dhtml and Javascript- part1, on February 3rd, 2008 at 5:05 pm Said:

    [...] TextboxList meets Autocompletion-Using autosuggest/autocomplete in a search field to allow users add or remove terms using Mootools [...]

  38. Ozkan, on February 4th, 2008 at 7:54 am Said:

    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#

  39. xavo, on February 4th, 2008 at 9:14 am Said:

    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.

  40. EGBlue, on February 4th, 2008 at 2:30 pm Said:

    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.

  41. Ozkan, on February 4th, 2008 at 2:48 pm Said:

    @EGBlue, can you send me the working sample code?
    ozkana {at] gmail (dot} com

  42. EGBlue, on February 4th, 2008 at 8:55 pm Said:

    @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

  43. sapporo, on February 6th, 2008 at 9:43 pm Said:

    @EGBlue

    If you have successfully translated the nice guillermo code into prototype, you re welcome

    thanks

    sapporro (at] gmail (dot] com

  44. Ajax Araçları : vBMaster.Org Seo Yarışması, on February 7th, 2008 at 9:01 am Said:

    [...] 20) TextboxList meets Autocompletion-Using autosuggest/autocomplete in a search field to allow users add or remove terms using Mootools Library. [...]

  45. danny, on February 11th, 2008 at 12:31 pm Said:

    very nice autocomplete.

    how can i get more than one autocomlete field on a single page to work? i cant get it.
    thx

  46. Proto!TextboxList meets Autocompletion | InteRiders, on February 11th, 2008 at 5:05 pm Said:

    [...] 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 [...]

  47. EGBlue, on February 12th, 2008 at 2:34 am Said:

    Hey guys, for those who are interested. A ported version of this great script into PrototypeJS can be found at http://www.interiders.com

  48. Ajaxian » Facebook Style Input Box, on February 15th, 2008 at 11:23 am Said:

    [...] 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 [...]

  49. flipthefrog, on February 15th, 2008 at 12:31 pm Said:

    When running it locally, i get this error on test.js, line 170

    j has no properties

    running it on apache works

  50. Revolutions Shout Box » Blog Archive » Facebook Style Input Box, on February 15th, 2008 at 4:08 pm Said:

    [...] Rauch has built a very useful input box script for easily adding multiple recipients for messaging purposes. Utilizing Mootools v1.2 it is only [...]

  51. noisylime » Blog Archive » TextboxList meets Autocompletion, on February 15th, 2008 at 4:42 pm Said:

    [...] LINK [...]

  52. Marcel, on February 15th, 2008 at 5:40 pm Said:

    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!

  53. Javascript News » Blog Archive » Facebook Style Input Box, on February 15th, 2008 at 5:41 pm Said:

    [...] 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 [...]

  54. Guillermo Rauch, on February 15th, 2008 at 5:49 pm Said:

    @Marcel
    Really interesting suggestions.. I guess I’ll have to release a new version then !
    Thanks

  55. AXXT - Web development and more » Give you input fields Facebook look, on February 15th, 2008 at 6:34 pm Said:

    [...] here is the author page http://devthought.com/textboxlist-meets-autocompletion/ [...]

  56. Devalnor, on February 16th, 2008 at 6:31 am Said:

    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

  57. Weekend Links - FancyZoom, Icon Design, PHP Desktop Applications, PHP Geocoding Using Google Maps API, LinkedIn, TextboxList AutoCompletion, on February 16th, 2008 at 4:32 pm Said:

    [...] 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 = ”; [...]

  58. EGBlue, on February 16th, 2008 at 8:53 pm Said:

    @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.

  59. SiNi Daily » Blog Archive » Facebook Style Input Box, on February 17th, 2008 at 7:58 am Said:

    [...] Guillermo Rauch set out to build something similar and he did a very good job of mimicking this behavior using MooTools v1.2: [...]

  60. Facebook style inputs :: Jaz-Lounge «, on February 17th, 2008 at 11:22 am Said:

    [...] 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 [...]

  61. fedi, on February 17th, 2008 at 3:13 pm Said:

    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

  62. Brian, on February 18th, 2008 at 6:32 pm Said:

    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?

  63. Opeyemi Obembe, on February 22nd, 2008 at 6:27 am Said:

    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

  64. Bobby, on February 23rd, 2008 at 4:20 pm Said:

    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.

  65. ian, on February 24th, 2008 at 10:42 pm Said:

    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?

  66. ian, on February 24th, 2008 at 11:04 pm Said:

    nevermind i got update to work.

  67. Jan, on February 25th, 2008 at 4:12 pm Said:

    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!

  68. Jan, on February 25th, 2008 at 4:14 pm Said:

    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!

  69. CSSgallery.info » ajax autosuggest or autocomplete, on February 27th, 2008 at 4:08 pm Said:

    [...] TextboxList meets Autocompletion [...]

  70. Best Of February 2008 | Best of the Month | Smashing Magazine, on February 29th, 2008 at 8:06 am Said:

    [...] 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)” [...]

  71. Best Of February 2008 | Best of the Month | Smashing Magazine, on February 29th, 2008 at 8:06 am Said:

    [...] 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)” [...]

  72. sanath, on February 29th, 2008 at 9:50 am Said:

    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”"”

  73. Fatih HayrioÄŸlu’nun not defteri » 01 Mart 2008 web’den seçme haberler, on March 1st, 2008 at 4:25 pm Said:

    [...] Facebook benzeri otomatik tamamlama scripti. Bağlantı [...]

  74. Facebook List TextboxList with AutoCompletion | GreatSo.com, on March 3rd, 2008 at 1:40 pm Said:

    [...] 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 [...]

  75. Martin, on March 6th, 2008 at 1:53 pm Said:

    Great script, I will for shure use it in my future projects.

  76. Mark, on March 12th, 2008 at 7:24 pm Said:

    is there anyway to only allow only one name to be submitted, instead of an unlimited amount?

  77. facebook textboxlist — award tour, on March 19th, 2008 at 7:16 pm Said:

    [...] Facebook TextboxList with Autocompletion. that’s a pretty good trick of having the input box inside a fake input box. [...]

  78. Magus Creo » Blog Archive » People Searchin’, on March 23rd, 2008 at 11:52 pm Said:

    [...] 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 [...]

  79. ulas, on March 24th, 2008 at 7:17 am Said:

    i made my own list for autocomplete, but i want that box be empty at first - how can i ?

  80. Fusion, on March 26th, 2008 at 2:33 pm Said:

    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.

  81. NextMint, on March 29th, 2008 at 9:58 am Said:

    Hi,
    Could anybody post a working example of how to get the data posted? What needs to be changed, and where?

    Many thanks

  82. Korayem, on March 30th, 2008 at 12:16 pm Said:

    mega slick…loong live ASP.NET

  83. Korayem, on March 30th, 2008 at 12:20 pm Said:

    Oppps..ditch that asp.net part in my comment, it was a stupid copy paste error….

    Thanks for sharing, this is super cool

  84. JP!, on March 30th, 2008 at 5:26 pm Said:

    Hello everyone!

    Where do i put the update() function!? People say they figured it out but don’t post the solution!

  85. JP!, on March 30th, 2008 at 6:40 pm Said:

    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 ==== ///

  86. JP!, on March 30th, 2008 at 6:41 pm Said:

    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” />

  87. Will, on March 31st, 2008 at 2:36 pm Said:

    I’m with JP. I’m not sure where to put the update function. So if someone could explain it that would great!

    Thanks.

  88. Delapouite, on April 3rd, 2008 at 10:31 am Said:

    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

  89. Pablo Rey, on April 12th, 2008 at 2:57 pm Said:

    loco, no se cuanto sabes de ajax… pero me parece que de literatura argentina sabes bastante ;)

  90. Pablo Rey, on April 12th, 2008 at 3:08 pm Said:

    nice and usefull ;)

  91. 60 More AJAX- and Javascript Solutions For Professional Coding | Developer's Toolbox | Smashing Magazine, on April 15th, 2008 at 12:03 pm Said:

    [...] 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)” [...]

  92. 60 solutions en AJAX - BLoOgLe, on April 16th, 2008 at 9:12 am Said:

    [...] text : à la Facebook, ou [...]

  93. Sean O, on April 16th, 2008 at 11:25 am Said:

    Very Cool. Any jQuery implementation of this, or something similar?

  94. 60 профессиональных AJAX и JavaScript решений, on April 16th, 2008 at 4:54 pm Said:

    [...] 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)” [...]

  95. Craig, on April 16th, 2008 at 8:38 pm Said:

    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?

  96. Guillermo Rauch, on April 16th, 2008 at 8:45 pm Said:

    @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.

  97. links for 2008-04-18 - The Boltzmann Constant, on April 18th, 2008 at 11:37 am Said:

    [...] TextboxList meets Autocompletion (tags: JavaScript Forms Ajax web2.0 JQuery) [...]

  98. AJAX and Javascript Solutions For Professional Coding - The Arts Lab TurkeY, on April 20th, 2008 at 1:19 pm Said:

    [...] 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)” [...]

  99. Facebook Style Input Box - .:咸湿鱼, on April 21st, 2008 at 6:26 am Said:

    [...] 一款Facebook风格的自动完成输入框 [...]

  100. webpixelkonsum, on April 21st, 2008 at 6:12 pm Said:

    Great idea to improve the feedback for the user. Beside that thank you the possibility to get the source coude for free ;)

    Ralph

  101. fedmich, on May 1st, 2008 at 3:34 pm Said:

    Thanks for the script :)

  102. 60 More AJAX- and Javascript Solutions For Professional Coding | Web Tools | Web Design & Graphic Design Blog, on May 5th, 2008 at 2:23 am Said:

    [...] 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)” [...]

  103. Milestone 01 - 70+ High-End Components for Web Designers and Developers : DevKick Blog, on May 13th, 2008 at 6:02 pm Said:

    [...] TextboxList / Mootools [...]

  104. Rainmore, on May 14th, 2008 at 10:53 pm Said:

    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

  105. Rainmore, on May 14th, 2008 at 11:06 pm Said:

    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!!!!

  106. antonio, on May 18th, 2008 at 4:50 pm Said:

    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.

  107. Alan, on May 23rd, 2008 at 8:46 pm Said:

    Will there be a version with Keyboard Support?

  108. Dynamic Form Autocomplete (Facebook Style), on June 3rd, 2008 at 2:50 am Said:

    [...] form autocomplete code, named TextboxList, is built on Mootools javascript framework and works just like the Facebook form inputs that are [...]

  109. Jeff Liu, on June 5th, 2008 at 10:18 pm Said:

    Great Job!
    What is this license?

  110. Jeff Liu, on June 5th, 2008 at 10:32 pm Said:

    Hello everyone
    Is there an article only on this cute auto-complete ?
    since i don’t need the TextboxList

  111. JAVIER MARROQUIN, on June 12th, 2008 at 2:32 pm Said:

    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);

  112. Imran, on June 22nd, 2008 at 5:42 am Said:

    Hey this is really cool thanks, I will use this :)

  113. Rufus Bazley, on July 2nd, 2008 at 4:44 pm Said:

    is it possible to link this to a access db with VB script does any one know?

  114. ryan, on July 3rd, 2008 at 12:08 am Said:

    i tried this using mootools 1.2 (non-beta) but it wasn’t working. what seems to be the problem?

  115. Hannes, on July 7th, 2008 at 8:31 am Said:

    Hey,

    I’m also interested in getting this thing to work with moo 1.2!
    Any plans for a soon 0.3 ?

  116. PLxKARL, on July 8th, 2008 at 10:46 pm Said:

    I know….compatible version for 1.2 would be very nice. I LIKE !!!

  117. 10 Mootools scripts for enhancing your html forms, on July 15th, 2008 at 11:38 am Said:

    [...] http://devthought.com/textboxlist-meets-autocompletion/ Tags: form, mootools if (typeof window.Delicious == “undefined”) window.Delicious = {}; [...]

  118. Blox.Svbasi · 60 More AJAX- and Javascript Solutions For Professional Coding, on July 18th, 2008 at 2:38 am Said:

    [...] 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)” [...]

  119. Dan, on July 26th, 2008 at 9:57 pm Said:

    Hey, great script, only trouble is that I need it to work alongside another, lightbox script actually which itself requires more than mootools-beta-1.2b1 offers.

    Is there anyway I can get this to work with mootools-1.2-more.js for example?

  120. Dan, on July 26th, 2008 at 10:07 pm Said:

    Sorry, my mistake, it doesnt require the more mootools version….just mootools-1.2-core-yc.js instead. So how can I get both:

    mootools-1.2-core-yc.js

    and

    mootools-beta-1.2b1.js

    working in the same script?

  121. Daniel, on July 29th, 2008 at 10:35 pm Said:

    Trying to convert this to v1.11 and I’m soo close! Wondering if anyone can have a look at it for me: http://mavrickdesign.com/test.html

  122. 60 полезных Ajax скриптов, библиотек и решений, которые Ð’Ñ‹ можете смело использовать при реализации своих проектов » Как создать сайт беспл, on August 7th, 2008 at 6:41 am Said:

    [...] Facebook Style Input Box [...]

  123. T.Mailrajan, on August 7th, 2008 at 9:12 am Said:

    Hi,
    This is wonderful.

    but the page is loading with content.If i want without cont ,what will i do?
    sorry for poor English.

  124. Zbiór skryptów AJAX/Javascript/Dhtml. (50+) | Darmowe skrypty, programowanie, informacje domeny, on August 17th, 2008 at 4:48 am Said:

    [...] Autocomplete TextboxList [...]

  125. Rex, on August 19th, 2008 at 5:56 am Said:

    Hey this is a nice implementation. We built a very similar thing with scriptaculous, just came across your implementation with mootools.

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

  126. Justin, on August 26th, 2008 at 4:10 pm Said:

    Will this work with v1.2? It hasn’t for me. Also, will there be limits feature on how many can be added in one textarea? How about for input that isn’t in the json file?

  127. Some Ajax tutorials « The Brook Song - ঝর্ণার গান, on August 30th, 2008 at 1:32 am Said:

    [...] 88. Facebook Style Input Box [...]

  128. drag, on September 9th, 2008 at 10:57 am Said:

    your demo doesn’t work in IE7

    this does not fill me with confidence

  129. 75 (Really) Useful JavaScript Techniques | Developer's Toolbox | Smashing Magazine, on September 11th, 2008 at 3:51 pm Said:

    [...] Textboxlist Auto-CompletionOne of the most attractive features of JavaScript is the highly useful autocompletion. No other website does the autocompletion better than Facebook. They have created an elegant way to search for other Facebook users using the autocomplete feature. Once the user is found, their name is added with an outline and an “X” link to remove the name. TextboxList has mimicked this feature and created a little script for downloading. [...]

  130. 75 (Really) Useful JavaScript Techniques | The Creative Children, on September 12th, 2008 at 2:30 am Said:

    [...] T­ext­boxli­st­ Aut­o-C­omplet­i­on­­O­­ne o­­f th­e mo­­s­t a­ttr­a­ctiv­e fea­tur­es­ o­­f Ja­v­a­S­cr­ipt is­ th­e h­igh­ly us­eful a­uto­­co­­mpletio­­n. No­­ o­­th­er­ webs­ite d­o­­es­ th­e a­uto­­co­­mpletio­­n better­ th­a­n Face­b­ook. They have c­reated an elegant way to­ searc­h f­o­r o­ther F­ac­ebo­o­k­ u­sers u­si­ng the au­to­c­o­m­p­lete f­eatu­re. O­nc­e the u­ser i­s f­o­u­nd, thei­r nam­e i­s added wi­th an o­u­tli­ne and an “X­” li­nk­ to­ rem­o­ve the nam­e. Tex­tbo­x­Li­st has m­i­m­i­c­k­ed thi­s f­eatu­re and c­reated a li­ttle sc­ri­p­t f­o­r do­wnlo­adi­ng. [...]

  131. Mainfram Reality » links for 2008-09-12, on September 12th, 2008 at 11:34 am Said:

    [...] Devthought - Guillermo Rauch’s Blog » TextboxList meets Autocompletion (tags: widget web2.0 web js ui) [...]

  132. 75 (Really) Useful JavaScript Techniques | aboutCREATION, on September 13th, 2008 at 8:17 am Said:

    [...] Textboxlist Auto-CompletionOne of the most attractive features of JavaScript is the highly useful autocompletion. No other website does the autocompletion better than Facebook. They have created an elegant way to search for other Facebook users using the autocomplete feature. Once the user is found, their name is added with an outline and an “X” link to remove the name. TextboxList has mimicked this feature and created a little script for downloading. [...]

  133. 75 (Really) Useful JavaScript Techniques | POLPDESIGN, on September 13th, 2008 at 11:23 am Said:

    [...] Useful JavaScript Techniques Textboxlist Auto-Completion One of the most attractive features of JavaScript is the highly useful autocompletion. No other [...]

  134. 75 (Really) Useful JavaScript Techniques | The Human Network (HCI IDC Alumni Blog), on September 14th, 2008 at 6:42 am Said:

    [...] Textboxlist Auto-CompletionOne of the most attractive features of JavaScript is the highly useful autocompletion. No other website does the autocompletion better than Facebook. They have created an elegant way to search for other Facebook users using the autocomplete feature. Once the user is found, their name is added with an outline and an “X” link to remove the name. TextboxList has mimicked this feature and created a little script for downloading. [...]

  135. 75 Useful JavaScript Techniques | download, on September 14th, 2008 at 1:03 pm Said:

    [...] Textboxlist Auto-Completion One of the most attractive features of JavaScript is the highly useful autocompletion. No other website does the autocompletion better than Facebook. They have created an elegant way to search for other Facebook users using the autocomplete feature. Once the user is found, their name is added with an outline and an “X” link to remove the name. TextboxList has mimicked this feature and created a little script for downloading. [...]

  136. MyWeb2.0Pedia » Blog Archive » TextboxList: Fancy Facebook-Like dynamic inputs!, on September 15th, 2008 at 6:24 pm Said:

    [...] One of the most attractive features of JavaScript is the highly useful autocompletion. No other website does the autocompletion better than Facebook. They have created an elegant way to search for other Facebook users using the autocomplete feature. Once the user is found, their name is added with an outline and an “X” link to remove the name. TextboxList has mimicked this feature and created a little script for downloading. 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) http://devthought.com/textboxlist-meets-autocompletion/  [...]

  137. egTheBlog » 5 Awesome JavaScript Solutions, on September 15th, 2008 at 6:54 pm Said:

    [...] Facebook Inspired Auto-Complete Form - One of the best multiple select text forms is on facebook. This post shows you how to do it. [...]

  138. 75 técnicas (realmente) útiles con JavaScript - Carrero Bitácora de los Hermanos Carrero, David Carrero Fernández-Baillo y Jaime Carrero Fernández-Baillo., on September 17th, 2008 at 4:41 am Said:

    [...] Textboxlist Auto-Completion Un atractivo efecto en JavaScript que es realmente útil para autocompletar texto y cuya referencia de uso es por ejemplo como lo hace Facebook.  [...]

  139. 75 (Really) Useful JavaScript Techniques | Neurosoftware web dev, on September 17th, 2008 at 5:06 am Said:

    [...] Textboxlist Auto-CompletionOne of the most attractive features of JavaScript is the highly useful autocompletion. No other website does the autocompletion better than Facebook. They have created an elegant way to search for other Facebook users using the autocomplete feature. Once the user is found, their name is added with an outline and an “X” link to remove the name. TextboxList has mimicked this feature and created a little script for downloading. [...]

  140. Joe, on September 22nd, 2008 at 3:31 pm Said:

    IE 7 seems to give me an error when matching the second letter typed…

    it gives this error “object doesnt support this property or method”

    If u dont type a second letter, it all works as expected.. yet if u do, it no longer functions..

    any ideas??

  141. ????? ?????????????? ? ???????? ajax ??????? | kaosty, on September 29th, 2008 at 8:56 pm Said:

    [...] ?????????????? ????? Textboxlist Auto-Completion (?????), ?????? ????? ???? ???? ??? ?????, ?? ? ???????? [...]

  142. 75 (Really) Useful JavaScript Techniques « Where LOVE begins, on September 30th, 2008 at 12:44 pm Said:

    [...] Textboxlist Auto-Completion One of the most attractive features of JavaScript is the highly useful autocompletion. No other website does the autocompletion better than Facebook. They have created an elegant way to search for other Facebook users using the autocomplete feature. Once the user is found, their name is added with an outline and an “X” link to remove the name. TextboxList has mimicked this feature and created a little script for downloading. [...]

  143. 60 More AJAX- and Javascript Solutions For Professional Coding « Where LOVE begins, on September 30th, 2008 at 12:53 pm Said:

    [...] 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)” [...]

  144. Mootools scripts para formulários | Blue MUIOMUIO, on October 1st, 2008 at 3:33 pm Said:

    [...] http://devthought.com/textboxlist-meets-autocompletion/ Partilha: These icons link to social bookmarking sites where readers can share and discover new [...]

  145. TextboxList con Autocompleter | Craftyman Blog, on October 1st, 2008 at 8:24 pm Said:

    [...] Post Original Post Relacionados [...]

  146. 20 Excellent AJAX Effects You Should Know - NETTUTS, on October 7th, 2008 at 12:58 am Said:

    [...] is a chore that can easily made much more simple (and I dare say fun) with a splash of Ajax. TextboxList meets Autocompletion is one such example of an auto-complete script that takes a Facebook-esque approach to [...]

  147. Olmazsa Olmaz Serisi No:1 - Otomatik Tamamlama « basarozcan, on October 7th, 2008 at 5:43 pm Said:

    [...] Kaynak Kod || Demo Tags: ajax, autocomplete, autocompletion, css, design, devthought, facebook, ipucu, javascript, kelephir, olmazsa olmaz, otomatik, rehber, tamamlama, tasar?m, xhtml [...]

  148. Ben, on October 8th, 2008 at 8:34 am Said:

    Hey Guillermo, awesome script you wrote here! It’s really amazing!

    Any chance you can port this to jQuery? The auto-complete plugin that jQuery has pretty much sucks!

  149. Alex H, on October 8th, 2008 at 11:31 am Said:

    I absolutely love this script. I am running it with MooTools 1.2 (release) but it comes up with this error : “arguments.callee.parent is not a function”

    Does anyone have an idea how we get around this? It only seems to work with MooTools 1.2 Beta and not release.

    Am i missing something?
    Alex

  150. ADX, on October 10th, 2008 at 11:51 am Said:

    Great job. Looks really great.
    Would be great if you do a port to jQuery framework. Thanks.

  151. 28 Autocomplete Scripts « The Adventures of Amit Dua, on October 12th, 2008 at 4:01 am Said:

    [...] Autocomplete TextboxList [...]

  152. Gordon, on October 13th, 2008 at 3:24 pm Said:

    This is really awesome! Thank you for creating this and making it available! I just had one idea that I think would be cool to see implemented, and probably wouldn’t be all that difficult of a change:

    Currently it selects the data into the blue boxes when you press enter, but you could allow this to take place with different keystrokes as well. For instance, typing a comma could automatically select the current item and move onto the next.

    Just a thought, and thanks again!

  153. 20 effetti Ajax eccellenti, on October 14th, 2008 at 4:04 am Said:

    [...] pratica che può essere resa molto più semplice (e oserei dire divertente) con un tocco di Ajax. TextboxList è un esempio di un completamento automatico di script che prende esempio da Facebook. [...]

  154. Chloe, on October 14th, 2008 at 8:04 pm Said:

    The reason the form submit was not passing the value was because the form input element needs a name, for without it it won’t be included.

    In test.html, line 29, add a name to the input:

    On line 20, add an onSubmit event to update the list:

    In test.js, define the tlist2 variable outside of the scope of the anonymous function at the bottom:

    var tlist2;
    window.addEvent(’domready’, function() {
    // init
    tlist2 = new FacebookList(’facebook-demo’, ‘facebook-auto’);

    Then when you submit, your form post URL will look like:

    test_submit?testinput=hello&autocompleteinput=Jelly+Fish

  155. Chloe, on October 14th, 2008 at 8:18 pm Said:

    To make this list only accept one item, make the following changes:

    test.js, line 106, autoAdd:
    input.set(’value’, ”);//.focus();
    if (this.data.length>=1) {
    input.style.visibility = ‘hidden’;
    input.style.display = ‘none’;
    }

    line 160, or 164 after the previous insert:
    },

    dispose: function(el) {
    var li = arguments.callee.parent(el);
    var input = this.lastinput || this.current.retrieve(’input’);
    input.set(’value’, ”).focus();
    input.style.visibility = ‘visible’;
    input.style.display = ‘block’;
    }

    This will hide the input box to prevent further entries after one item has been added. It is probably fairly simple to make the # of items configurable, perhaps with TextboxList.count, but I’ll leave that to others.

  156. Chloe, on October 14th, 2008 at 11:32 pm Said:

    How do you add multiple lists on the same page? I noticed that when you instantiate it, you pass the id of the input box and the id of the div tag.

    tlist2 = new FacebookList(’facebook-demo’, ‘facebook-auto’);
    tlist3 = new FacebookList(’facebook-demo2′, ‘facebook-auto’);

    The only problem is, when the autocomplete list pops up for the 2nd list, it pops up under the 1st list! Changing the div id tag name doesn’t help, because THEN the popup list is not formatted. The test.css has styles for facebook-auto and if you rename the div tag, then the inner elements (popup list) aren’t formatted.

    The only solution I can think of is inline styles for all the popup elements, which could get messy. Any other solution?

  157. AJAX online Examples at web design company in india expertzweb, on October 17th, 2008 at 1:56 pm Said:

    [...] is a chore that can easily made much more simple (and I dare say fun) with a splash of Ajax. TextboxList meets Autocompletion is one such example of an auto-complete script that takes a Facebook-esque approach to [...]

  158. AJAX online Examples « Web Design Company in Chandigarh : MiracleStudios.us, on October 17th, 2008 at 2:26 pm Said:

    [...] is a chore that can easily made much more simple (and I dare say fun) with a splash of Ajax. TextboxList meets Autocompletion is one such example of an auto-complete script that takes a Facebook-esque approach to [...]

  159. AJAX online Examples « Web Design Company in India, Delhi, on October 17th, 2008 at 2:29 pm Said:

    [...] is a chore that can easily made much more simple (and I dare say fun) with a splash of Ajax. TextboxList meets Autocompletion is one such example of an auto-complete script that takes a Facebook-esque approach to [...]

  160. itsik, on October 19th, 2008 at 9:30 am Said:

    fix for 1.2:

    replace all the:
    arguments.callee.parent

    with: this.parent

    on test.js

  161. itsik, on October 19th, 2008 at 11:51 am Said:

    more fixs for 1.2:

    on textboxlist.compressed.js

    replace:
    this.bits.remove

    width:
    this.bits.erase

    replace:
    this.events.remove

    with:
    this.events.erase

  162. joe, on October 20th, 2008 at 6:09 pm Said:

    does anyone have a solution for the problem in IE?

    i keep getting the error “Object doesn’t support this property or method”

    any help is greatly appreciated!

  163. joe, on October 20th, 2008 at 6:13 pm Said:

    sorry, to clarify a bit more…the error occurs when you attempt to type in a second character in the text box. this leads me to believe the problem is with the following line in test.js

    if(this.autocurrent) this.autocurrent.removeClass(’auto-focus’);

    thanks again.

    joe

  164.   jQuery Dynamic TextboxList with Autocomplete by bigredswitch, on October 20th, 2008 at 11:00 pm Said:

    [...] mootools script that does a Facebook-like or AppleMail-like input control: thebasic one here and here with autocompletion.? The first thing I noticed is that Guillermo is only 17 years old! If you look at his original [...]

  165. 60+ Ajax & Javascript For Professional Coders | Tech User, Blogger and Designers References, on October 21st, 2008 at 8:33 am Said:

    [...] 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)” [...]

  166. SanNhac, on October 22nd, 2008 at 12:11 pm Said:

    Very Nice, thank you very much

  167. 20 ajax efekti-TurkForum.Net, on October 23rd, 2008 at 7:43 pm Said:

    [...] burada 20 ajax efekti toplanm??. TextboxList meets Autocompletion: giri? formlar?n?n otomatik olarak doldurulmas? i?in [...]

  168. Sosyal ?m - Teknoloji haberleri » 20 ajax efekti » Blog Ar?ivi » 20 ajax efekti, on October 23rd, 2008 at 7:48 pm Said:

    [...] TextboxList meets Autocompletion: giri? formlar?n?n otomatik olarak doldurulmas? için kullan?labilir. benzer bir uygulamayla ajax alan ad? arama yaz?s?nda kar??la?m??t?k. [...]

  169. Chloe, on October 24th, 2008 at 11:25 pm Said:

    I’ve given up on this for auto-complete functionality. I recommend the Yahoo AJAX library, which is FAR more robust and configurable, with much more user support and documentation provided.

    developer.yahoo.com/yui/autocomplete

  170. zyxel, on October 26th, 2008 at 9:06 pm Said:

    how about a facebook footer navigation??? any example for it??

  171. kohaci, on October 28th, 2008 at 5:48 am Said:

    That’s so cool.

  172. L3tos, on October 28th, 2008 at 8:05 am Said:

    If list more than specific number, can it be set to be scroll down, so list is not too long ??

  173. Script de Autocompletar: TextboxList meets Autocompletion | Links Web, on October 28th, 2008 at 8:34 am Said:

    [...] http://devthought.com/textboxlist-meets-autocompletion/? [...]

  174. 20 Adet Ücretsiz Ajax Efekti GB | Gencbilgin.com - Bilgiyi E?lendirerek Ö?reten Alem…, on October 29th, 2008 at 6:11 am Said:

    [...] TextboxList meets Autocompletion: giri? formlar?n?n otomatik olarak doldurulmas? için kullan?labilir. benzer bir uygulamayla ajax alan ad? arama yaz?s?nda kar??la?m??t?k. [...]

  175. 20 Adet Ücretsiz Ajax Efekti GB | Gencbilgin.com - Bilgiyi E?lendirerek Ö?reten Alem…, on October 29th, 2008 at 6:12 am Said:

    [...] TextboxList meets Autocompletion: giri? formlar?n?n otomatik olarak doldurulmas? için kullan?labilir. benzer bir uygulamayla ajax alan ad? arama yaz?s?nda kar??la?m??t?k. [...]

  176. 75 (Really) Useful JavaScript Techniques | Evolution : weblog, on October 31st, 2008 at 1:38 am Said:

    [...] Textboxlist Auto-Completion One of the most attractive features of JavaScript is the highly useful autocompletion. No other website does the autocompletion better than Facebook. They have created an elegant way to search for other Facebook users using the autocomplete feature. Once the user is found, their name is added with an outline and an “X” link to remove the name. TextboxList has mimicked this feature and created a little script for downloading. [...]

  177. 60 More AJAX- and Javascript Solutions For Professional Coding | Evolution : weblog, on October 31st, 2008 at 1:41 am Said:

    [...] 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)” [...]

  178. yeahcmoi, on November 2nd, 2008 at 10:36 am Said:

    How work the other parts of facebook, like adding a comment ?

  179. Diseño Web Peru, on November 6th, 2008 at 7:51 pm Said:

    Gracias por el codigo exelente

    Saludos
    —————————————-
    http://www.joelcristobal.com

  180. Rolando, on November 9th, 2008 at 5:46 am Said:

    hi, There are some parameters to that match the first letters of autocomplete?. thanks

  181. Dheeraj, on November 11th, 2008 at 4:10 am Said:

    Hi,

    The script is returning an error if there are more items in fetched.aspx file. There are around 5000 items in JSON format. This error is being fired in Internet Explorer 7.0. It worked well in Chrome.

    Error: Stop Running this script?

    A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive.

    Thanks,
    Dheeraj

  182. Herschel Stone, on November 12th, 2008 at 7:02 pm Said:

    d76angt0b5341hx4

  183. pligg.com, on November 15th, 2008 at 3:48 am Said:

    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 som…

  184. Gathering of the Thoughts » Blog Archive » TextboxList: Fancy Facebook-Like dynamic inputs!, on November 21st, 2008 at 11:16 am Said:

    [...] New! TextboxList with autocompletion [...]

Leave a Reply

« TextboxList: Fancy Facebook-Like dynamic inputs! How Flash currently aids Javascript development »