TextboxList: Fancy Facebook-Like dynamic inputs! Now, in Prototype

February 11th, 2008 by EGBlue

untitled-14.png

Hey everybody, after coming across Guillermo Rauch’s script, I knew i had to port it into my favorite library, Prototype. In this page you will find the Guillermo’s script translated into Prototype. I kept the original formatting and will post it just like he did for the ease of understanding for people who used the original first. Later on this week, I will release an improved version of the script. This post is a conversion of the original deal. The improved script will include more features and implement several improvements. Let me include the original post by Guillermo that describes the script. The post is slightly modified to suite my blog’s format. Have fun, and please! report any glitches or feature requests so I will implement those in the improved version, due later on this week.

Original post:

Check out a demo of TextboxList before reading!

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 [Now: Prototype] 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.
Anatomy of the control

As usual, I try to come up with a semantic, unobtrusive approach. I start with the CSS and the markup that will be my end result.

I want to go from something like this:
[html]


  • [/html]
    to something like this (only one possible scenario, naturally)
    [html]

    • Jorge Luis Borges
    • Julio Cortazar
  • [/html]
    Basically, it’s a group of pieces (that I’ll call bits), that can be either a box or an input (small, except for the main one). The user is able to move around between the bits by using his keyboard or his mouse.
    Javascript

    As far as the javascript goes, I try to first think about reusable code (usually classes) that I may use. I thus first coded the class that adds resizing capabilities to the small fields as the user types, and a small utility method to find the caret position.

    The only challenges I found was handling the complex events while keeping everything crossbrowser. Again, none of this would have been possible if it wasn’t for MooTools (1.2) [Now: Prototype].
    Using it

    All you have to do is:
    [js]
    new TextboxList(‘input-demo’);[/js]
    Where input-demo is the id of the desired input to replace

    The constructor can take these options:

    * onInputFocus (event, fired when an input gets focus)
    * onInputBlur (event, fired when an input loses focus)
    * onBoxFocus (event, fired when a box gets focus)
    * onBoxBlur (event, fired when a box loses focus)
    * onBoxDispose (event, fired when a box is removed)
    * resizable (option, hash, passed to ResizableTextbox constructor)
    * className (option, string, prefix of the classnames of the generated objects)
    * extrainputs (option, boolean, adds small inputs between boxes if true)
    * startinput (option, boolean, adds a small input before the first box if true)
    * hideempty (option, boolean, hides the small inputs by default)

    Download

    Click here to download the cool script ;)

    Posted in Prototype/JavaScript/Ajax

    23 Responses

    1. Willem

      Thanks This looks really nice.

    2. Jacques

      This is pure candy.

      Thanks!

    3. Facebook » TextboxList: Fancy Facebook-Like dynamic inputs! Now, in Prototype |…

      [...] Ubergizmo – Español wrote an interesting post today on TextboxList: Fancy Facebook-Like dynamic inputs! Now, in Prototype |…Here’s a quick excerpt [...]

    4. Facebook » TextboxList: Fancy Facebook-Like dynamic inputs! Now, in Prototype |…

      [...] BigBrotherAccess.com wrote an interesting post today on TextboxList: Fancy Facebook-Like dynamic inputs! Now, in Prototype |…Here’s a quick excerpt [...]

    5. Facebook style inputs :: Jaz-Lounge «

      [...] InteRiders there is also a version in prototype available. Mental notice: If I have time, I should implement a [...]

    6. AJAX Crawler - Collection of DHTML and AJAX Samples.

      [...] more and download the source from the below link. http://www.interiders.com/2008/02/11/textboxlist-fancy-facebook-like-dynamic-inputs-now-in-prototype… Posted in AJAX Showcase, AutoComplete [...]

    7. GP

      I like this control a lot but need two minor changes:

      1. Is there a way to reject user input that doesn’t come from the selection. As it is it currently lets you type in anything irregardless if it’s in the list
      2. Is there a way to bind the value to a key (non-visible) instead of the string being displayed?

      Thanks,

      GP

    8. pawan vidya verma

      how i fetch data from database from a particular table

    9. Veeru

      How do i get content from the text box? i was looking at the code and there is no function available to fetch the current content in the text-box, i can add content to the text box, but i would like to retrieve the content from a text-box – any ideas?

    10. Eric

      Re: Veeru’s question.

      This was bugging me as well. It turns out you can just call the update() method on the FacebookList or TextboxList object. For example, call tlist2.update() before submitting the form and you should be fine. Just adding that call to the form’s onsubmit worked for me:

    11. 16 Javascript Tutorials Inspired By Social Networking Sites | Dev Words

      [...] 7. Facebook-like Inputs With Prototype [...]

    12. 陈宝成のBlog » 16个SNS网站常用JS组件

      [...] Demo  Download 7. Facebook Prototype输入框 [...]

    13. Marcus

      If I paste a string with commas, the entire string will be treated as a keyword which imho is not as it should be. Please consider this addNewTag():

      addNewTag: function() {
      var tlist = P5.tb.inputName;
      var _input = document.getElementsByClassName(‘maininput’);
      var tarr = $F(_input[0]).split(‘,’);
      for (var j=0; j 0)
      {
      tlist.add(text);
      }
      }

      _input = document.getElementsByClassName(‘maininput’);
      for(var i = 0; i<_input.length; i++)
      {
      _input[i].value = “”;
      }
      },

    14. 10 Plugin Tutorial Desain AJAX Facebook User Interface

      [...] asli berbasis MooTools, tapi ada juga yang menggunakan Prototype buatan InteRiders. Cek demonya di Devthought untuk TextboxList MooTools dan InteRiders untuk TextboxList [...]

    15. martin

      Nice plugin! But it is possible to transform it for jquery ???

    16. Mike

      Nice one…

      But did you know it doesnt work with IE8? Styling is messy…

    17. 16个SNS网站常用JS组件

      [...] Facebook Prototype输入框 Facebook的输入框设计非常不错,这个教程教你如何实现类似效果。 Demo | [...]

    18. jtkmfe

      Долго искал эту темку, чтобы так все грамотно было, спасибо.\

    19. Bopeelence

      Не поспоришь, глупая заметка

    20. bibTwisa

      В каком-то блоге я уже замечал подобную информацию да ладно

    21. conan o brien

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

      // fetch and feed
      new Request.JSON({‘http://localhost:65462/monitera-business/’: ‘json.html’, ‘onComplete’: function(j) {
      j.each(tlist2.autoFeed, tlist2);
      }}).send();
      });

      my error is :j is null how can i solve it

    22. Pawan

      My jquery stopped working after adding your script and css files!

      Any idea what wrong could be going?

    23. Pedro Pereira

      Looks nice.
      But don’t work in IE 8 and 9.
      Please help!!
      Thanks in avance…

    Leave a Comment

    Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

    About InteRiders

    Welcome to InteRiders Inc. Our company is located in the San Fernando Valley, California. We specialize in development of web-based systems using cutting edge technologies. In this site we will share with the readers some pieces of codes along with insights into projects we've been working on. Hopefully others could benefit from our work. Have great reading.

    Ran Grushkowsky, CEO