Click here to Skip to main content
Click here to Skip to main content

Fancy Facebook Style TextboxList

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

TextboxList.gif

Introduction

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.

TextboxList

 <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"/> 
    </li> 
     </ul> 
</div>

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!

.textboxlist-ul
{
  overflow: hidden;
  margin: 0;
  padding: 3px 4px 0;
  border: 1px solid #999;
  padding-bottom: 3px;
}
.textboxlist-li
{
   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) {
                TypeHere.val('');
                return false;
            }
            if(!emailReg.test(myInputText)) {
              alert('Email Is Invalid');
              TypeHere.val('');
              return false;
            }
            //Create the list item on fly and apply the css
            CreateLi(myInputText)
            //Save into Textbox or HiddenField
            var strValue = txtValues.val() + myInputText + ';';
            txtValues.val(strValue);
            //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);
            TypeHere.val('');
            TypeHere.width(10);
            break;
       }
});

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) {
      $("#myListbox").prepend(strHTML);
   }
   //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.

TextboxList

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

License

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

Share

About the Author

Arlen Navasartian
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
QuestionAbout TextboxList fixed width PinmemberYashwanth R12-Mar-14 19:21 
GeneralMy vote of 5 PinprofessionalRelicV8-Jul-13 9:19 
Questionhow to delete text in texboxlist Pinmemberedwardkuan18-Apr-13 23:14 
GeneralMy vote of 4 PinmemberPrasanta_Prince28-Apr-11 6:13 
Generalrecommand using fcbkcomplete plugin Pinmemberfred_xu20-Apr-11 15:21 
GeneralRe: recommand using fcbkcomplete plugin Pinmemberj03x220-Apr-11 20:51 
Generalcan it support db PinmemberAbhimanyu Kumar Vatsa19-Apr-11 22:40 
GeneralRe: can it support db PinmemberArlen Navasartian20-Apr-11 14:41 
GeneralRe: can it support db PinmemberAbhimanyu Kumar Vatsa20-Apr-11 18:05 
GeneralHi PinmemberNitin Sawant19-Apr-11 18:46 
GeneralRe: Hi PinmemberArlen Navasartian20-Apr-11 14:45 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.141015.1 | Last Updated 19 Apr 2011
Article Copyright 2011 by Arlen Navasartian
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid