Click here to Skip to main content
14,487,386 members

Fancy Facebook Style TextboxList

Rate this:
4.75 (16 votes)
Please Sign up or sign in to vote.
4.75 (16 votes)
19 Apr 2011CPOL
TextboxList is a user friendly control that allows you to manage multiple inputs using a single textbox.



TextboxList is a user friendly control that allows you to manage multiple inputs using a single text box, instead of having multiple text boxes. So if you really need a multi-input textbox, this control will help you and keep your web form more clear for the users.

You have probably seen this control on Facebook or Yahoo! Mail before. Here is a simple version of the TextboxList.

Using the code

User interface

First of all, I am going to explain the user interface of this control. The combination of div tags, UL, LI elements, and HTML Input creates our TextboxList. The control contains a div tag, unordered list, list item, and the input box. The following is the structure of the control.


 <div class="textboxlist" id="mydivTextBox">
     <ul class="textboxlist-ul" id="myListbox"> 
    <li class="textboxlist-li textboxlist-li-editable" 

                   style="display: block;" id="liTypeHere">
           <input type="text" class="textboxlist-li-editable-input" 

              style="width: 10px;" id=" TypeHere" maxlength="35"/> 

Inside a div tag, there is a UL, the UL contains LI, and LI contains an HTML Input. The next part is applying the CSS to the HTML elements. The CSS plays a main role in this UserControl.

The ul in itself is a block-level element; however, the lis are also block-level elements. All of the elements surrounding the list items are inline elements. Pretty boring, huh? All of that CSS for just a few lines of lousy HTML. This is the secret behind the creation of inline CSS UL, just remember that you want the UL items to be a series of inline elements. From here on out, we can style our inline UL to our liking. If you are unfamiliar with CSS, then I recommend you visit the CSS Tutorials and learn CSS!

  overflow: hidden;
  margin: 0;
  padding: 3px 4px 0;
  border: 1px solid #999;
  padding-bottom: 3px;
   list-style-type: none;
   float: left;
   display: block;
   padding: 0;
   margin: 0 5px 3px 0;
   cursor: default;

For sample and editable code, please download the file!

Client side script

The user starts typing in the input box; once the user presses comma ',' on the keyboard (',' is used for separating list items in the input text), the following steps are run:

  1. Check for input validation.
  2. Create the list item based on user entry value on fly and apply the CSS to it.
  3. Save the entry value into a textbox or hidden field.
  4. Push the input box to the right side and set the properties of the new entry point.
TypeHere.keyup(function (e) {
     switch (e.keyCode) {
         case 188: // ','
            var myInputLength = TypeHere.val().length;
            var myInputText = TypeHere.val().substring(0, 
                        myInputLength - 1); // remove ','
            TypeHere.width(myInputLength * 6 + 15);
            //Check for email validation.
            //You can apply webservices for any type of validation.
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if (myInputText.length == 0) {
                return false;
            if(!emailReg.test(myInputText)) {
              alert('Email Is Invalid');
              return false;
            //Create the list item on fly and apply the css
            //Save into Textbox or HiddenField
            var strValue = txtValues.val() + myInputText + ';';
            //Push the textbox to the right
            TypeHere.width(myInputLength * 6 + 15);
            //Make the input width to default and set as blank
            liTypeHere.css('left', TypeHere.position().left + 
                           TypeHere.width() + 10);

Once the user presses ',', the CreateLi(myInputText) function is fired. The function creates the ListItem element on the fly.

 function CreateLi(strValue) {
   var strHTML = $("<li class='textboxlist-li textboxlist-li-box " + 
      "textboxlist-li-box-deletable'>" + strValue + 
      "<a href='#' class='textboxlist-li-box-deletebutton'></a></li>");
   var size = $("#myListbox > li").size();
   //If It is the first entry in the input box, the list
   //element gonna be the first item of unorderedlist. 
   if (txtValues.val().length == 0) {
   //If It is not the first entry in the input box, the list element
   // will be located at the last list item before the input box. 
   else {
      $("#myListbox li:nth-child(" + size + ")").before($(strHTML));

And for the deletion option, we need to apply the click event to the delete icon of LI.


//Adding a click event to a delete button.
$("a").live('click',function (e) { 
        //Remove the current LI       
       //Remove from the textbox or hidden field ... 
       var txtValues = $("input[id$='txtValues']"); 
       var strUpdate= txtValues.val(); 
       strUpdate = strUpdate.replace($(this).parent().text() + ";",'');


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Arlen Navasartian
Web Developer
United States United States
No Biography provided

Comments and Discussions

QuestionAbout TextboxList fixed width Pin
Yashwanth R12-Mar-14 19:21
MemberYashwanth R12-Mar-14 19:21 
GeneralMy vote of 5 Pin
RelicV8-Jul-13 9:19
MemberRelicV8-Jul-13 9:19 
GeneralMy vote of 4 Pin
Prasanta_Prince28-Apr-11 6:13
MemberPrasanta_Prince28-Apr-11 6:13 
Generalrecommand using fcbkcomplete plugin Pin
fred_xu20-Apr-11 15:21
Memberfred_xu20-Apr-11 15:21 
GeneralRe: recommand using fcbkcomplete plugin Pin
j03x220-Apr-11 20:51
Memberj03x220-Apr-11 20:51 
Generalcan it support db Pin
Abhimanyu Kumar Vatsa19-Apr-11 22:40
MemberAbhimanyu Kumar Vatsa19-Apr-11 22:40 
GeneralRe: can it support db Pin
Arlen Navasartian20-Apr-11 14:41
MemberArlen Navasartian20-Apr-11 14:41 
GeneralRe: can it support db Pin
Abhimanyu Kumar Vatsa20-Apr-11 18:05
MemberAbhimanyu Kumar Vatsa20-Apr-11 18:05 
GeneralHi Pin
Nitin Sawant19-Apr-11 18:46
professionalNitin Sawant19-Apr-11 18:46 
GeneralRe: Hi Pin
Arlen Navasartian20-Apr-11 14:45
MemberArlen Navasartian20-Apr-11 14:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 19 Apr 2011


57 bookmarked