Available in the OSS Version

Combo Box - Filtering

This sample demonstrates filtering in the combo box.
Start using the control by focusing one of the combo's below.


Filtering Condition of StartsWith and Auto-Complete


Filtering Condition of Contains


Case-Sensitive

This sample is designed for a larger screen size.

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

The dropdown list of the igCombo control can be filtered based off of the input value. The auto-suggest functionality is also supported which highlights character strings that match entered text. Further, the autocomplete feature will prefill the text in the input box as the user is typing to reflect the first matching item in the dropdown list. See how these features interact by changing the options below.

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>
</head>
<body>
    <style>        
        .combo-label {margin-bottom:.5em;}

        .title { font-size:large; }
    </style>

    <div class="title">Start using the control by focusing one of the combo's below.</div>
    <br /> <br />
    <h3 class="combo-label">Filtering Condition of StartsWith and Auto-Complete</h3>
    <div id="autoCompleteCombo"></div>
    <br />
    <h3 class="combo-label">Filtering Condition of Contains</h3>
    <div id="filterContainsCombo"></div>
    <br />
    <h3 class="combo-label">Case-Sensitive</h3>
    <div id="caseSensitiveCombo"></div>

    <script src="/data-files/nw-products.js"></script>

    <script>

        var northwindProductsEN = [
            { "ProductID": 1, "ProductName": "Chai" }, { "ProductID": 2, "ProductName": "Chang" }, { "ProductID": 3, "ProductName": "Aniseed Syrup"}, { "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning" },
            { "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix" }, { "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread" }, { "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears" },
            { "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce" }, { "ProductID": 9, "ProductName": "Mishi Kobe Niku" }, { "ProductID": 10, "ProductName": "Ikura" }, { "ProductID": 11, "ProductName": "Queso Cabrales", "CategoryName": "Dairy Products" },
            { "ProductID": 12, "ProductName": "Queso Manchego La Pastora" }, { "ProductID": 13, "ProductName": "Konbu" }, { "ProductID": 14, "ProductName": "Tofu" }, { "ProductID": 15, "ProductName": "Genen Shouyu" }, 
            { "ProductID": 16, "ProductName": "Pavlova" }, { "ProductID": 17, "ProductName": "Alice Mutton" }, { "ProductID": 18, "ProductName": "Carnarvon Tigers" }, { "ProductID": 19, "ProductName": "Teatime Chocolate Biscuits" },
            { "ProductID": 20, "ProductName": "Sir Rodney\u0027s Marmalade" }, { "ProductID": 21, "ProductName": "Sir Rodney\u0027s Scones" }, { "ProductID": 22, "ProductName": "Gustaf\u0027s Knäckebröd" }, { "ProductID": 23, "ProductName": "Tunnbröd" },
            { "ProductID": 24, "ProductName": "Guaraná Fantástica" }, { "ProductID": 25, "ProductName": "NuNuCa Nuß-Nougat-Creme" }, { "ProductID": 26, "ProductName": "Gumbär Gummibärchen" }, { "ProductID": 27, "ProductName": "Schoggi Schokolade" },
            { "ProductID": 28, "ProductName": "Rössle Sauerkraut" }, { "ProductID": 29, "ProductName": "Thüringer Rostbratwurst" }, { "ProductID": 30, "ProductName": "Nord-Ost Matjeshering" }
        ]
        $(function () {

            $("#autoCompleteCombo").igCombo({
                width: "270px",
                textKey: "ProductName",
                valueKey: "ProductID",
                dataSource: northwindProducts,
                filteringType: "local",
                autoComplete: true,
                placeHolder: "Focus me...",
                dropDownOrientation: "bottom"
            });

            $("#filterContainsCombo").igCombo({
                width: "270px",
                textKey: "ProductName",
                valueKey: "ProductID",
                dataSource: northwindProducts,
                filteringType: "local",
                filteringCondition: "contains",
                highlightMatchesMode: "contains",
                placeHolder: "Focus me...",
                dropDownOrientation: "bottom"
            });

            $("#caseSensitiveCombo").igCombo({
                width: "270px",
                textKey: "ProductName",
                valueKey: "ProductID",
                dataSource: northwindProductsEN,
                filteringType: "local",
                autoSelectFirstMatch: true,
                caseSensitive: true,
                autoComplete: true,
                placeHolder: "Focus me...",
                dropDownOrientation: "bottom"
            });


            $("#autoCompleteCombo").igNotifier({
                showOn: "focus",
                state: "success",
                direction: "auto",
                closeOnBlur: true,
                showIcon: false,
                mode: "popover",
                locale: {
                    successMsg: "When autoComplete is enabled, the filtering condition is always 'startsWith'. Start typing .."
                }
            });

            $("#filterContainsCombo").igNotifier({
                showOn: "focus",
                state: "success",
                direction: "auto",
                showIcon: false,
                closeOnBlur: true,
                mode: "popover",
                locale: {
                    successMsg: "Type some text in order to check how 'Contains' filtering condition works"
                }
            });

            $("#caseSensitiveCombo").igNotifier({
                showOn: "focus",
                state: "success",
                direction: "auto",
                showIcon: false,
                closeOnBlur: true,
                mode: "popover",
                locale: {
                    successMsg: "If set to true, filtering and auto selection will be case-sensitive."
                }
            });
        });

    </script>

</body>
</html>