Available in the OSS Version
Combo Box - Filtering
This sample demonstrates filtering in the combo box.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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>
var northwindProducts = [
{ "ProductID": 1, "ProductName": "Chai", "CategoryName": "Beverages", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 39 },
{ "ProductID": 2, "ProductName": "Chang", "CategoryName": "Beverages", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 17 },
{ "ProductID": 3, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 13 },
{ "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 53 },
{ "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 0 },
{ "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 120 },
{ "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 15 },
{ "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 6 },
{ "ProductID": 9, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 29 },
{ "ProductID": 10, "ProductName": "Ikura", "CategoryName": "Seafood", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 31 },
{ "ProductID": 11, "ProductName": "Queso Cabrales", "CategoryName": "Dairy Products", "ImageUrl": "../../images/samples/nw/categories/4.png", "InStock": 22 },
{ "ProductID": 12, "ProductName": "Queso Manchego La Pastora", "CategoryName": "Dairy Products", "ImageUrl": "../../images/samples/nw/categories/4.png", "InStock": 86 },
{ "ProductID": 13, "ProductName": "Konbu", "CategoryName": "Seafood", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 24 },
{ "ProductID": 14, "ProductName": "Tofu", "CategoryName": "Produce", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 35 },
{ "ProductID": 15, "ProductName": "Genen Shouyu", "CategoryName": "Condiments", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 39 },
{ "ProductID": 16, "ProductName": "Pavlova", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 29 },
{ "ProductID": 17, "ProductName": "Alice Mutton", "CategoryName": "Meat/Poultry", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 0 },
{ "ProductID": 18, "ProductName": "Carnarvon Tigers", "CategoryName": "Seafood", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 42 },
{ "ProductID": 19, "ProductName": "Teatime Chocolate Biscuits", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 25 },
{ "ProductID": 20, "ProductName": "Sir Rodney\u0027s Marmalade", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 40 },
{ "ProductID": 21, "ProductName": "Sir Rodney\u0027s Scones", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 3 },
{ "ProductID": 22, "ProductName": "Gustaf\u0027s Knäckebröd", "CategoryName": "Grains/Cereals", "ImageUrl": "../../images/samples/nw/categories/5.png", "InStock": 104 },
{ "ProductID": 23, "ProductName": "Tunnbröd", "CategoryName": "Grains/Cereals", "ImageUrl": "../../images/samples/nw/categories/5.png", "InStock": 61 },
{ "ProductID": 24, "ProductName": "Guaraná Fantástica", "CategoryName": "Beverages", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 20 },
{ "ProductID": 25, "ProductName": "NuNuCa Nuß-Nougat-Creme", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 76 },
{ "ProductID": 26, "ProductName": "Gumbär Gummibärchen", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 15 },
{ "ProductID": 27, "ProductName": "Schoggi Schokolade", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 49 },
{ "ProductID": 28, "ProductName": "Rössle Sauerkraut", "CategoryName": "Produce", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 26 },
{ "ProductID": 29, "ProductName": "Thüringer Rostbratwurst", "CategoryName": "Meat/Poultry", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 0 },
{ "ProductID": 30, "ProductName": "Nord-Ost Matjeshering", "CategoryName": "Seafood", "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">Start using the control by focusing one of the combo's below.</div>
<h3 class="combo-label">Filtering Condition of StartsWith and Auto-Complete</h3>
<ig-notifier [(widgetId)]="autoCompleteComboId"></ig-notifier>
<ig-combo [(options)]="autoCompleteComboOptions" [(widgetId)]="autoCompleteComboId"></ig-combo>
<h3 class="combo-label">Filtering Condition of Contains</h3>
<ig-notifier [(widgetId)]="filterContainsComboId"></ig-notifier>
<ig-combo [(options)]="filterContainsComboOptions" [(widgetId)]="filterContainsComboId"></ig-combo>
<h3 class="combo-label">Case-Sensitive</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: "Focus me...",
dropDownOrientation: "bottom"
};
this.filterContainsComboOptions = {
width: "270px",
textKey: "ProductName",
valueKey: "ProductID",
dataSource: northwindProducts,
filteringType: "local",
filteringCondition: "contains",
highlightMatchesMode: "contains",
placeHolder: "Focus me...",
dropDownOrientation: "bottom"
};
this.caseSensitiveComboOptions = {
width: "270px",
textKey: "ProductName",
valueKey: "ProductID",
dataSource: this.northwindProductsEN,
filteringType: "local",
autoSelectFirstMatch: true,
caseSensitive: true,
autoComplete: true,
placeHolder: "Focus me...",
dropDownOrientation: "bottom"
};
this.notifierOptionsAutoComplete = {
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 .."
}
};
this.notifierOptionsFilterContains = {
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"
}
};
this.notifierOptionsCaseSensitive = {
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."
}
};
}
}
@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: "Focus me...",
dropDownOrientation: "bottom"
},
notifier: {
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 .."
}
}
};
var filterContainsCombo = {
combo: {
width: "270px",
textKey: "ProductName",
valueKey: "ProductID",
dataSource: northwindProducts,
filteringType: "local",
filteringCondition: "contains",
highlightMatchesMode: "contains",
placeHolder: "Focus me...",
dropDownOrientation: "bottom"
},
notifier: {
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"
}
}
};
var caseSensitiveCombo = {
combo: {
width: "270px",
textKey: "ProductName",
valueKey: "ProductID",
dataSource: northwindProductsEN,
filteringType: "local",
autoSelectFirstMatch: true,
caseSensitive: true,
autoComplete: true,
placeHolder: "Focus me...",
dropDownOrientation: "bottom"
},
notifier: {
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."
}
}
};
return (
<div class="title">Start using the control by focusing one of the combo's below.</div>
<h3 class="combo-label">Filtering Condition of StartsWith and Auto-Complete</h3>
<IgNotifier id="autoCompleteCombo" options={autoCompleteCombo.notifier} />
<IgCombo id="autoCompleteCombo" options={autoCompleteCombo.combo} />
<h3 class="combo-label">Filtering Condition of Contains</h3>
<IgNotifier id="filterContainsCombo" options={filterContainsCombo.notifier} />
<IgCombo id="filterContainsCombo" options={filterContainsCombo.combo} />
<h3 class="combo-label">Case-Sensitive</h3>
<IgNotifier id="caseSensitiveCombo" options={caseSensitiveCombo.notifier} />
<IgCombo id="caseSensitiveCombo" options={caseSensitiveCombo.combo} />
);
}
});
ReactDOM.render(
<App />,
document.getElementById("app")
);
</script>
</div>
</body>
</html>