Click here to Skip to main content
12,703,102 members (29,313 online)
Click here to Skip to main content
Add your own
alternative version


1 bookmarked

A multiple input control using JQuery

, 6 Aug 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Creating an input control which can accept multiple input values with the help of jQuery and un ordered list (UL).
Here is the code for creating an input control with the help of jQuery and an unordered list. The last item of UL will be text box. As soon as the user hits ENTER key, the value of text box will be added as an item of the UL.

1. The code below uses the latest version of JQuery.
2. An UL is used as a placeholder, with a input (textbox) control as a default item. This item will be the last item in the UL always.
3. The Style section will provide the UL and LI elements a virtual input control look.
4. Couple of JavaScript functions are used for:
a. Focus the text box, when user clicks the UL.
b. Add a new list item to UL, when user clicks enter.
c. Deletes the item, if the user opts for it.

I have included the code for the whole HTML page. If you have any questions please let me know.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <script src="" type="text/javascript"></script>
    <style type="text/css">
            font: 400 11px/15px "Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            border: 1px solid #7F9DB9;
            width: 99%;
            overflow: hidden;
        .filterlist li
            float: left;
        .filterlist li input
            border: none 0px;
            width: auto;
            padding-left: 2px;
        .filterlist div.item
            border: 1px solid #ccc;
            background-color: #ececec;
            margin: 2px;
            padding: 0px 0px 0px 4px;
        .filterlist div.item span
            display: inline-block;
        .filterlist div.item a
            background: transparent url(images/delete.gif) no-repeat;
            font-size: 10px;
            margin-left: 3px;
            padding: 4px 6px 1px 8px;
            text-decoration: none;
            color: red;
    <script type="text/javascript">
        var cnt = 1;
        $(document).ready(function() {
            $("#txtValue").keypress(function(e) {
                if (e.keyCode == 13) {
                    var txtbox = $('#txtValue');
                    if (txtbox.val() == "") // You can include the validations here
                        return false;
                    $('#fltxtbox').before($('<li id="listItem' + cnt + '"><div class="item"><span>' + txtbox.val() + '</span><a href="javascript:RemoveItem(\'listItem' + cnt + '\');">X</a></div></li>'));
                    return false;
            $('ul.filterlist').click(function() {
        function RemoveItem(id) {
            $('#' + id).remove();
    <form id="form1">
        <ul class="filterlist">
            <li id="fltxtbox">
                    <input id="txtValue" type="text" />

This control can be used in ASP.Net with suitable modifications. I am using this control as a filter-control, by sending the data back to server as using Page Methods.

You can select the values as a list using the following javascript function.
function GetValues() {
            var list = new Array();
            $('ul.filterlist > li:not(:last) span').each(function() {
            return list;


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


About the Author

J a a n s
Software Developer (Senior)
India India
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralIf you ever intend to update this, then maybe add an "edit i... Pin
j03x211-Sep-10 23:12
memberj03x211-Sep-10 23:12 
Generalthx, great snippet ! Will come in very handy ! Pin
j03x26-Aug-10 9:27
memberj03x26-Aug-10 9:27 
GeneralI have updated the article with a javascript function for ge... Pin
J a a n s6-Aug-10 5:39
memberJ a a n s6-Aug-10 5:39 
Generalhow would I turn the items into an array usable in code-behi... Pin
j03x26-Aug-10 2:18
memberj03x26-Aug-10 2:18 
GeneralReason for my vote of 4 Pretty useful ! Pin
j03x26-Aug-10 2:17
memberj03x26-Aug-10 2:17 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170118.1 | Last Updated 6 Aug 2010
Article Copyright 2010 by J a a n s
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid