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

A multiple input control using JQuery

, 6 Aug 2010
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            font: 400 11px/15px "Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;
        }
        .filterlist
        {
            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;
        }
    </style>
    <script type="text/javascript">
        var cnt = 1;
        $(document).ready(function() {
            $("#txtValue").keypress(function(e) {
                //alert(e.keyCode);
                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>'));
                    txtbox.val('');
                    cnt++;
                    return false;
                }
            });
            $('ul.filterlist').click(function() {
                $('#txtValue').focus();
            });
        });
        function RemoveItem(id) {
            $('#' + id).remove();
        }
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <ul class="filterlist">
            <li id="fltxtbox">
                <div>
                    <input id="txtValue" type="text" />
                </div>
            </li>
        </ul>
    </div>
    </form>
</body>
</html>
 
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() {
                list.push($(this).text());
            });
            //alert(list);
            return list;
        }

License

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

Share

About the Author

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

Comments and Discussions

 
GeneralIf you ever intend to update this, then maybe add an "edit i... Pinmemberj03x211-Sep-10 22:12 
Generalthx, great snippet ! Will come in very handy ! Pinmemberj03x26-Aug-10 8:27 
GeneralI have updated the article with a javascript function for ge... PinmemberJ a a n s6-Aug-10 4:39 
Generalhow would I turn the items into an array usable in code-behi... Pinmemberj03x26-Aug-10 1:18 
GeneralReason for my vote of 4 Pretty useful ! Pinmemberj03x26-Aug-10 1:17 

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.140827.1 | Last Updated 6 Aug 2010
Article Copyright 2010 by J a a n s
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid