OSS で利用できる機能
コンボ ボックス - フィルタリング
このサンプルは、コンボ ボックスのフィルタリングを紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
以下のコンボをフォーカスしてください。
StartsWith フィルター条件およびオートコンプリート
Contains フィルター条件
大文字と小文字の区別
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
igCombo コントロールのドロップダウン リストは入力値に基づいてフィルターできます。
入力したテキストと一致する文字列を強調する自動補完機能もサポートされます。
また、オート コンプリート機能は、ユーザーが入力しているときに、テキスト ボックスにドロップダウン リストの最初の一致する項目の文字列を挿入します。以下のオプションを変更して、機能を確認します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/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>