Available in the OSS Version

Combo Box - Editing

This samples demonstrates how to set up the combo with various editing options.
Error

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This samples demonstrates how to set up the combo with various editing options.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

    <!-- Ignite UI for jQuery Sample Data -->
    <script src="/data-files/credit-cards.js"></script>

    <style>
        .payment-form {
            width:100%;overflow:hidden;
        }
        #paymentType {
            float:left;
        }
        #payment-label {
            line-height:32px;
            margin-left:210px;
        }
        .card-form {
            width: 350px;
            border: 2px solid #0094ff;
            border-radius: 15px;
            padding: 25px 15px 0px 15px;
        }

        .card-logo {
            margin-left: 9px;
        }

        .ui-igcombo-wrapper,
        .ui-igedit {
            margin-bottom: 25px;
        }

        #creditCardNumber .ui-igcombo-button { display: none; }

        .good-through {
            float: left;
            margin-right: 5px;
        }

        #buy {
            margin-top: 10px;
            margin-left: 260px;
        }
    </style>
</head>
<body>
    <div class="payment-form">
        <div id="paymentType" name="paymentType"></div>
        <div id="payment-label"><label id="paymentTypeLabel" for="paymentType">This seller accepts credit card only</label></div>
    </div>
    <div class="card-form">
        <div id="creditCardType"></div><img src="/images/samples/credit-cards/visa_logo_large.gif" id="cardLogo" class="card-logo" alt="Visa" />

        <div id="creditCardNumber"></div>
        <div class="good-through ui-state-disabled">
            <label>GOOD<br />THRU</label>
        </div>
        <div id="month" name="month"></div>
        <div id="year"></div>
        <input id="ccv" />
    </div>
    <input type="button" value="Buy" id="buy" />

    <script>

        $(function () {
            var selectedCardType = "Visa";
            $("#paymentType").igCombo({
                textKey: "Text",
                valueKey: "Text",
                dataSource: paymentTypes,
                mode: "readonlylist"
            }).attr("title", "This combo is in readonlylist mode. It shows the drop down, but is not editable and items are not selectable.").igPopover({
                direction: "top",
                headerTemplate: {
                    closeButton: true
                },
                closeOnBlur: true,
                animationDuration: 150,
                maxHeight: null,
                maxWidth: 170,
                showOn: "focus"
            });

            $("#creditCardType").igCombo({
                width: "240px",
                textKey: "Text",
                valueKey: "Text",
                dataSource: creditCardTypes,
                mode: "dropdown",
                enableClearButton: false,
                selectionChanged: function (event, ui) {
                    selectedCardType = ui.items[0].data.Text;
                    $("#cardLogo").attr({
                        "src": ui.items[0].data.Image,
                        "alt": selectedCardType
                    });
                    $("#creditCardNumber").igCombo("option", "dataSource", creditCards[selectedCardType]);
                    if (selectedCardType === "American Express") {
                        $("#ccv").igNumericEditor("option", "maxValue", 9999);
                    } else {
                        $("#ccv").igNumericEditor("option", "maxValue", 999);
                        $("#ccv").igNumericEditor("value", null);
                    }
                }
            }).attr("title", "This combo is in dropdown mode. Only items from the list can be selected.").igPopover({
                direction: "top",
                headerTemplate: {
                    closeButton: true
                },
                closeOnBlur: true,
                animationDuration: 150,
                maxHeight: null,
                maxWidth: 170,
                showOn: "focus"
            });

            function transformCustomValue(value) {
                var newValue = {
                    CardNumber: "", 
                    DisplayNumber: "",
                    Image: creditCardLogos[selectedCardType]
                };
                value = value.replace(/-/g, "");
                value = value.split("");
                for (var i = 0; i < (selectedCardType === "American Express" ? 3 : 4); i++) {
                    newValue.CardNumber += value.splice(0, 1);
                    newValue.DisplayNumber += "*";
                }
                var length = value.length;
                for (var i = 0; i < length; i++) {
                    var char = value.splice(0, 1);
                    if (i % 4 === 0) {
                        newValue.CardNumber += "-";
                        newValue.DisplayNumber += "-";
                    }
                    newValue.CardNumber += char;
                    newValue.DisplayNumber += i > 7 ? char : "*";
                }
                return newValue;
            };

            $("#creditCardNumber").igCombo({
                width: "100%",
                textKey: "DisplayNumber",
                valueKey: "CardNumber",
                dataSource: creditCards[selectedCardType],
                dropDownOnFocus: true,
                filteringType: "none",
                placeHolder: "Enter credit card number, or choose from previously used...",
                itemTemplate: "${DisplayNumber}<img src='${Image}' class='card-logo' />",
                allowCustomValue: true,
                validatorOptions: {
                    custom: function (value) {
                        var validator = $("#creditCardNumber").igCombo("validator"),
                            re = selectedCardType === "American Express" ? /^[0-9]{3}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/ : /^[0-9]{4}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/,
                            isValid = true;
                        if (value.length) {
                            value = value[0];
                            if (!$("#creditCardNumber").igCombo("selectedItems")) {
                                // custom value is selected
                                if (!re.test(value)) {
                                    isValid = false;
                                }
                                if (isValid) {
                                    var newValue = transformCustomValue(value),
                                        index = creditCards[selectedCardType].length,
                                        current;
                                    if (current = $("#creditCardNumber").igCombo("itemsFromValue", newValue)) {
                                        $("#creditCardNumber").igCombo("select", current.element)
                                    } else {
                                        creditCards[selectedCardType].push(newValue);
                                        $("#creditCardNumber").igCombo("dataBind");
                                        $("#creditCardNumber").igCombo("index", index);
                                    }
                                }
                            }
                            $("#month").igCombo("option", "disabled", false);
                            $("#year").igCombo("option", "disabled", false);
                            $("#ccv").igNumericEditor("option", "disabled", false);
                            $("div.good-through").removeClass("ui-state-disabled");
                            return isValid;
                        }
                        $("#month").igCombo("option", "disabled", true);
                        $("#year").igCombo("option", "disabled", true);
                        $("#ccv").igNumericEditor("option", "disabled", true);
                        $("div.good-through").addClass("ui-state-disabled");
                        return false;
                    },
                    errorMessage: "Invalid credit card number!",
                    onchange: true,
                    onblur: true
                }
            }).attr("title", "This combo allows custom value input. Users can type in values that are not available in the list.").igPopover({
                direction: "right",
                position: "start",
                headerTemplate: {
                    closeButton: true
                },
                closeOnBlur: true,
                animationDuration: 150,
                maxHeight: null,
                maxWidth: 170,
                showOn: "focus"
            });

            $("#month").igCombo({
                width: "100px",
                textKey: "Text",
                valueKey: "Value",
                dataSource: months,
                disabled: true,
                mode: "dropdown"
            });

            $("#year").igCombo({
                width: "100px",
                textKey: "Text",
                valueKey: "Text",
                dataSource: years,
                disabled: true,
                mode: "dropdown"
            });

            $("#ccv").igNumericEditor({
                width: "100px",
                placeHolder: "CCV",
                disabled: true
            });

            $("#buy").igButton({
                labelText: $("#buy").val(),
                centerLabel: true,
                width: 120
            });

        });

    </script>

</body>
</html>