A multiple input control using JQuery

J a a n s

Rate me:

4.67/5 (3 votes)

6 Aug 2010CPOL1 min read

30.9K

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.

XML

<!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)

Written By

J a a n s

Software Developer (Senior) NA

United States

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

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

A multiple input control using JQuery

License

Comments and Discussions