Click here to Skip to main content
11,706,007 members (56,128 online)
Click here to Skip to main content

Fancy Facebook Style TextboxList

, 19 Apr 2011 CPOL 23.1K 1.2K 57
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

You may also be interested in...

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
professionalRelicV8-Jul-13 9:19 
Questionhow to delete text in texboxlist Pin
edwardkuan18-Apr-13 23:14
memberedwardkuan18-Apr-13 23:14 
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
memberNitin 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    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 | Terms of Use | Mobile
Web04 | 2.8.150819.1 | Last Updated 19 Apr 2011
Article Copyright 2011 by Arlen Navasartian
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid