OSS で利用できる機能

コンボボックス - 概要

igCombo はコンボボックスコントロールです。

以下のコンボをフォーカスしてください。

StartsWith フィルター条件およびオートコンプリート

Contains フィルター条件

大文字と小文字の区別

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

JSON、HTML select、XML、および .NET コレクションなどのさまざまなデータソースにバインドできます。igCombo の機能:

コードビュー

JsFiddle で表示

クリップボードへコピー

                    <div class="title">以下のコンボをフォーカスしてください。</div>
    <br /> <br />
    <h3 class="combo-label">StartsWith フィルター条件およびオートコンプリート</h3>
    <div id="autoCompleteCombo"></div>
    <br />
    <h3 class="combo-label">Contains フィルター条件</h3>
    <div id="filterContainsCombo"></div>
    <br />
    <h3 class="combo-label">大文字と小文字の区別</h3>
    <div id="caseSensitiveCombo"></div>

                    .combo-label {margin-bottom:.5em;}

        .title { font-size:large; }

                    <!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">以下のコンボをフォーカスしてください。</div>
    <br /> <br />
    <h3 class="combo-label">StartsWith フィルター条件およびオートコンプリート</h3>
    <div id="autoCompleteCombo"></div>
    <br />
    <h3 class="combo-label">Contains フィルター条件</h3>
    <div id="filterContainsCombo"></div>
    <br />
    <h3 class="combo-label">大文字と小文字の区別</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: "ここにフォーカス",
                dropDownOrientation: "bottom"
            });

            $("#filterContainsCombo").igCombo({
                width: "270px",
                textKey: "ProductName",
                valueKey: "ProductID",
                dataSource: northwindProducts,
                filteringType: "local",
                filteringCondition: "contains",
                highlightMatchesMode: "contains",
                placeHolder: "ここにフォーカス",
                dropDownOrientation: "bottom"
            });

            $("#caseSensitiveCombo").igCombo({
                width: "270px",
                textKey: "ProductName",
                valueKey: "ProductID",
                dataSource: northwindProductsEN,
                filteringType: "local",
                autoSelectFirstMatch: true,
                caseSensitive: true,
                autoComplete: true,
                placeHolder: "ここにフォーカス",
                dropDownOrientation: "bottom"
            });


            $("#autoCompleteCombo").igNotifier({
                showOn: "focus",
                state: "success",
                direction: "auto",
                closeOnBlur: true,
                showIcon: false,
                mode: "popover",
                locale: {
                    successMsg: "autoComplete が有効な場合、フィルタリング条件は常に 'startsWith' です。入力を開始してください。"
                }
            });

            $("#filterContainsCombo").igNotifier({
                showOn: "focus",
                state: "success",
                direction: "auto",
                showIcon: false,
                closeOnBlur: true,
                mode: "popover",
                locale: {
                    successMsg: "「Contains」フィルター条件を使用するには、テキストを入力します。"
                }
            });

            $("#caseSensitiveCombo").igNotifier({
                showOn: "focus",
                state: "success",
                direction: "auto",
                showIcon: false,
                closeOnBlur: true,
                mode: "popover",
                locale: {
                    successMsg: "true に設定されている場合、フィルタリングおよび自動選択が大文字と小文字を区別します。"
                }
            });
        });

    </script>

</body>
</html>

                    var northwindProducts = [
    { "ProductID": 1, "ProductName": "果汁100% オレンジ", "CategoryName": "飲料", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 39 },
    { "ProductID": 2, "ProductName": "果汁100% グレープ", "CategoryName": "飲料", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 17 },
    { "ProductID": 3, "ProductName": "ホワイトソルト", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 13 },
    { "ProductID": 4, "ProductName": "ブラックペッパー", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 53 },
    { "ProductID": 5, "ProductName": "ピュアシュガー", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 0 },
    { "ProductID": 6, "ProductName": "うまい素", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 120 },
    { "ProductID": 7, "ProductName": "乾燥バナナ", "CategoryName": "加工食品", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 15 },
    { "ProductID": 8, "ProductName": "ピュアデミグラスソース", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 6 },
    { "ProductID": 9, "ProductName": "アメリカンポーク", "CategoryName": "肉類", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 29 },
    { "ProductID": 10, "ProductName": "大陸サーモン", "CategoryName": "魚介類", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 31 },
    { "ProductID": 11, "ProductName": "ロッキーチーズ", "CategoryName": "乳製品", "ImageUrl": "../../images/samples/nw/categories/4.png", "InStock": 22 },
    { "ProductID": 12, "ProductName": "フレッシュバター", "CategoryName": "乳製品", "ImageUrl": "../../images/samples/nw/categories/4.png", "InStock": 86 },
    { "ProductID": 13, "ProductName": "うなぎ", "CategoryName": "魚介類", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 24 },
    { "ProductID": 14, "ProductName": "乾燥アップル", "CategoryName": "加工食品", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 35 },
    { "ProductID": 15, "ProductName": "だしかつお", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 39 },
    { "ProductID": 16, "ProductName": "バニラクリームアイス", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 29 },
    { "ProductID": 17, "ProductName": "うす味ウインナー", "CategoryName": "肉類", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 0 },
    { "ProductID": 18, "ProductName": "かに", "CategoryName": "魚介類", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 42 },
    { "ProductID": 19, "ProductName": "チョコクリームアイス", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 25 },
    { "ProductID": 20, "ProductName": "紅茶バー", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 40 },
    { "ProductID": 21, "ProductName": "じゃがチップス", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 3 },
    { "ProductID": 22, "ProductName": "モーニングブレッド", "CategoryName": "穀類、シリアル", "ImageUrl": "../../images/samples/nw/categories/5.png", "InStock": 104 },
    { "ProductID": 23, "ProductName": "バタートースト", "CategoryName": "穀類、シリアル", "ImageUrl": "../../images/samples/nw/categories/5.png", "InStock": 61 },
    { "ProductID": 24, "ProductName": "コーヒーマイルド", "CategoryName": "飲料", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 20 },
    { "ProductID": 25, "ProductName": "アメリカンクラッカー", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 76 },
    { "ProductID": 26, "ProductName": "バナナキャンディー", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 15 },
    { "ProductID": 27, "ProductName": "メロンミルクキャンディー", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 49 },
    { "ProductID": 28, "ProductName": "特選味のり", "CategoryName": "加工食品", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 26 },
    { "ProductID": 29, "ProductName": "ベターローストハム", "CategoryName": "肉類", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 0 },
    { "ProductID": 30, "ProductName": "いくら", "CategoryName": "魚介類", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 10 }
]

             <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>

    <my-app>Loading...</my-app>

    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
    <script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.lob.js"></script>
    <script>
        System.config( {
            paths: {
                'npm:': 'https://unpkg.com/'
            },
            map: {
                '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
                '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
                '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
                'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
                'rxjs': 'npm:rxjs'
            },
            // packages tells the System loader how to load when no filename and/or no extension
            packages: {
                rxjs: {
                    defaultExtension: 'js'
                },
                'igniteui-angular-wrappers': {
                    main: './index.js',
                    defaultExtension: 'js'
                }
            },
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true }
        } );

        System.import( 'filtering.ts' ).then( null, console.error.bind( console ) );
    </script>
</body>
</html>

             import { Component, NgModule } from '@angular/core';
import { IgComboComponent, IgNotifierComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic }	from '@angular/platform-browser-dynamic';

declare var jQuery: any;
declare var northwindProducts: any[];

@Component({
    selector: 'my-app',
    template: `
        <div class="title">以下のコンボをフォーカスしてください。</div>

        <h3 class="combo-label">StartsWith フィルター条件およびオートコンプリート</h3>
        <ig-notifier [(widgetId)]="autoCompleteComboId"></ig-notifier>
        <ig-combo [(options)]="autoCompleteComboOptions" [(widgetId)]="autoCompleteComboId"></ig-combo>

        <h3 class="combo-label">Contains フィルター条件</h3>
        <ig-notifier [(widgetId)]="filterContainsComboId"></ig-notifier>
        <ig-combo [(options)]="filterContainsComboOptions" [(widgetId)]="filterContainsComboId"></ig-combo>

        <h3 class="combo-label">大文字と小文字の区別</h3>
        <ig-notifier [(widgetId)]="caseSensitiveComboId"></ig-notifier>
        <ig-combo [(options)]="caseSensitiveComboOptions" [(widgetId)]="caseSensitiveComboId"></ig-combo>
    `
})
export class AppComponent {
    
    private northwindProductsEN: any[] = [
        { "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" }
    ];

    private autoCompleteComboOptions: IgCombo;
    private filterContainsComboOptions: IgCombo;
    private caseSensitiveComboOptions: IgCombo;

    private notifierOptionsAutoComplete: IgNotifier;
    private notifierOptionsFilterContains: IgNotifier;
    private notifierOptionsCaseSensitive: IgNotifier;
    
    private autoCompleteComboId: string = "autoCompleteCombo";
    private filterContainsComboId: string = "filterContainsCombo";
    private caseSensitiveComboId: string = "caseSensitiveCombo";


    constructor() {
        this.autoCompleteComboOptions = {
            width: "270px",
            textKey: "ProductName",
            valueKey: "ProductID",
            dataSource: northwindProducts,
            filteringType: "local",
            autoComplete: true,
            placeHolder: "ここにフォーカス",
            dropDownOrientation: "bottom"
        };
        
        this.filterContainsComboOptions = {
            width: "270px",
            textKey: "ProductName",
            valueKey: "ProductID",
            dataSource: northwindProducts,
            filteringType: "local",
            filteringCondition: "contains",
            highlightMatchesMode: "contains",
            placeHolder: "ここにフォーカス",
            dropDownOrientation: "bottom"
        };

        this.caseSensitiveComboOptions = {
            width: "270px",
            textKey: "ProductName",
            valueKey: "ProductID",
            dataSource: this.northwindProductsEN,
            filteringType: "local",
            autoSelectFirstMatch: true,
            caseSensitive: true,
            autoComplete: true,
            placeHolder: "ここにフォーカス",
            dropDownOrientation: "bottom"
        };

        this.notifierOptionsAutoComplete = {
            showOn: "focus",
            state: "success",
            direction: "auto",
            closeOnBlur: true,
            showIcon: false,
            mode: "popover",
            locale: {
                successMsg: "autoComplete が有効な場合、フィルタリング条件は常に 'startsWith' です。入力を開始してください。"
            }
        };

        this.notifierOptionsFilterContains = {
            showOn: "focus",
            state: "success",
            direction: "auto",
            showIcon: false,
            closeOnBlur: true,
            mode: "popover",
            locale: {
                successMsg: "「Contains」フィルター条件を使用するには、テキストを入力します。"
            }
        };

        this.notifierOptionsCaseSensitive = {
            showOn: "focus",
            state: "success",
            direction: "auto",
            showIcon: false,
            closeOnBlur: true,
            mode: "popover",
            locale: {
                successMsg: "true に設定されている場合、フィルタリングおよび自動選択が大文字と小文字を区別します。"
            }
        };
    }
}


@NgModule({
    bootstraps: [AppComponent],
    declarations: [AppComponent, IgComboComponent, IgNotifierComponent],
    imports: [BrowserModule]
})
export class AppModule { } 

platformBrowserDynamic().bootstrapModule(AppModule);

             <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- ReactJS library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.lob.js"></script>
    <script src="/js-data/nw-products"></script>
    <!-- Ignite UI for jQuery ReactJS Files -->
    <script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
    <div id="app">
        <script type="text/babel">

            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" }
            ];

            var App = React.createClass({

                render: function() {

                    var autoCompleteCombo = {
                        combo: {
                            width: "270px",
                            textKey: "ProductName",
                            valueKey: "ProductID",
                            dataSource: northwindProducts,
                            filteringType: "local",
                            autoComplete: true,
                            placeHolder: "ここにフォーカス",
                            dropDownOrientation: "bottom"
                        },
                        notifier: {
                            showOn: "focus",
                            state: "success",
                            direction: "auto",
                            closeOnBlur: true,
                            showIcon: false,
                            mode: "popover",
                            locale: {
                                successMsg: "autoComplete が有効な場合、フィルタリング条件は常に 'startsWith' です。入力を開始してください。"
                            }
                        }
                    };

                    var filterContainsCombo = {
                        combo: {
                            width: "270px",
                            textKey: "ProductName",
                            valueKey: "ProductID",
                            dataSource: northwindProducts,
                            filteringType: "local",
                            filteringCondition: "contains",
                            highlightMatchesMode: "contains",
                            placeHolder: "ここにフォーカス",
                            dropDownOrientation: "bottom"
                        },
                        notifier: {
                            showOn: "focus",
                            state: "success",
                            direction: "auto",
                            showIcon: false,
                            closeOnBlur: true,
                            mode: "popover",
                            locale: {
                                successMsg: "「Contains」フィルター条件を使用するには、テキストを入力します。"
                            }
                        }
                    };
                    
                    var caseSensitiveCombo = {
                        combo: {
                            width: "270px",
                            textKey: "ProductName",
                            valueKey: "ProductID",
                            dataSource: northwindProductsEN,
                            filteringType: "local",
                            autoSelectFirstMatch: true,
                            caseSensitive: true,
                            autoComplete: true,
                            placeHolder: "ここにフォーカス",
                            dropDownOrientation: "bottom"
                        },
                        notifier: {
                            showOn: "focus",
                            state: "success",
                            direction: "auto",
                            showIcon: false,
                            closeOnBlur: true,
                            mode: "popover",
                            locale: {
                                successMsg: "true に設定されている場合、フィルタリングおよび自動選択が大文字と小文字を区別します。"
                            }
                        }
                    };

                    return (
                        <div class="title">以下のコンボをフォーカスしてください。</div>

                        <h3 class="combo-label">StartsWith フィルター条件およびオートコンプリート</h3>
                        <IgNotifier id="autoCompleteCombo" options={autoCompleteCombo.notifier} />
                        <IgCombo id="autoCompleteCombo" options={autoCompleteCombo.combo} />
                        
                        <h3 class="combo-label">Contains フィルター条件</h3>
                        <IgNotifier id="filterContainsCombo" options={filterContainsCombo.notifier} />
                        <IgCombo id="filterContainsCombo" options={filterContainsCombo.combo} />
                        
                        <h3 class="combo-label">大文字と小文字の区別</h3>
                        <IgNotifier id="caseSensitiveCombo" options={caseSensitiveCombo.notifier} />
                        <IgCombo id="caseSensitiveCombo" options={caseSensitiveCombo.combo} />
                    );
                }
            });

            ReactDOM.render(
                <App />,
                document.getElementById("app")
            );
        </script>
    </div>
</body>
</html>

Ignite UI for jQuery | サンプル

検索結果

コンボボックス - 概要

StartsWith フィルター条件およびオートコンプリート

Contains フィルター条件

大文字と小文字の区別

コードビュー

Ignite UI for jQuery | サンプル

検索結果

コンボ ボックス - 概要

StartsWith フィルター条件およびオートコンプリート

Contains フィルター条件

大文字と小文字の区別

コード ビュー

コンボボックス - 概要

コードビュー