AutoComplete Filtering

The AutoComplete control takes control of its source collectionView filtering in order to show only items that match what the user typed.

If you want to keep control of the filter, set the itemsSource property to your CollectionView's items property. The AutoComplete will create a new CollectionView for its internal use, and the original filtering will be preserved.

For example, the AutoComplete below uses a filtered CollectionView as its itemsSource. The filter remains active while searching for items as the user types:

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create a filtered CollectionView to use as a data source let view = new wijmo.CollectionView(getData(), { filter: theFilterFunction }); showItemCount(); // // create the AutoComplete using the CollectionView's items as a source let theAutoComplete = new input.AutoComplete('#theAutoComplete', { displayMemberPath: 'country', itemsSource: view.items }); // // toggle our filter document.querySelector('#filter').addEventListener('click', e => { view.filter = e.target.checked ? theFilterFunction : null; theAutoComplete.itemsSource = view.items; showItemCount(); }); // // our filter function function theFilterFunction(item) { return item.popk > 50000; } // // show filtered item count function showItemCount() { let msg = wijmo.format('Source list contains <b>{length:n0}</b> countries.', view.items); document.querySelector('#itemCount').innerHTML = msg; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity AutoComplete Filtering</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="form-group"> <div id="theAutoComplete"></div> </div> <div class="form-check"> <label class="form-check-label" for="filter">Apply Filter</label> <input id="filter" type="checkbox" checked="checked"> </div> <div id="itemCount"></div> </div> </body> </html>
// export function getData() { return [ { id: 1, country: 'Luxembourg', gdpm: 57825, popk: 563, gdpcap: 102708 }, { id: 2, country: 'Switzerland', gdpm: 664005, popk: 8238, gdpcap: 80602 }, { id: 3, country: 'Norway', gdpm: 388315, popk: 5205, gdpcap: 74604 }, { id: 4, country: 'Macao', gdpm: 46178, popk: 647, gdpcap: 71372 }, { id: 5, country: 'Qatar', gdpm: 166908, popk: 2421, gdpcap: 68941 }, { id: 6, country: 'Ireland', gdpm: 283716, popk: 4635, gdpcap: 61211 }, { id: 7, country: 'United States', gdpm: 18036650, popk: 321601, gdpcap: 56083 }, { id: 8, country: 'Singapore', gdpm: 292734, popk: 5535, gdpcap: 52887 }, { id: 9, country: 'Denmark', gdpm: 295091, popk: 5660, gdpcap: 52136 }, { id: 10, country: 'Australia', gdpm: 1225286, popk: 23940, gdpcap: 51181 }, { id: 11, country: 'Iceland', gdpm: 16718, popk: 333, gdpcap: 50204 }, { id: 12, country: 'Sweden', gdpm: 493042, popk: 9851, gdpcap: 50049 }, { id: 13, country: 'San Marino', gdpm: 1558, popk: 31, gdpcap: 50258 }, { id: 14, country: 'Netherlands', gdpm: 750696, popk: 16937, gdpcap: 44322 }, { id: 15, country: 'United Kingdom', gdpm: 2858482, popk: 65110, gdpcap: 43902 }, { id: 16, country: 'Austria', gdpm: 374261, popk: 8621, gdpcap: 43412 }, { id: 17, country: 'Canada', gdpm: 1550537, popk: 35825, gdpcap: 43280 }, { id: 18, country: 'Finland', gdpm: 232077, popk: 5472, gdpcap: 42411 }, { id: 19, country: 'Germany', gdpm: 3365293, popk: 82176, gdpcap: 40952 }, { id: 20, country: 'Belgium', gdpm: 454288, popk: 11209, gdpcap: 40528 }, { id: 21, country: 'United Arab Emirates', gdpm: 370296, popk: 9581, gdpcap: 38648 }, { id: 22, country: 'France', gdpm: 2420163, popk: 64275, gdpcap: 37653 }, { id: 23, country: 'New Zealand', gdpm: 172257, popk: 4647, gdpcap: 37068 }, { id: 24, country: 'Israel', gdpm: 299413, popk: 8377, gdpcap: 35742 }, { id: 25, country: 'Japan', gdpm: 4124211, popk: 126981, gdpcap: 32478 }, { id: 26, country: 'Brunei Darussalam', gdpm: 12930, popk: 417, gdpcap: 31007 }, { id: 27, country: 'Italy', gdpm: 1815759, popk: 60796, gdpcap: 29866 }, { id: 28, country: 'Puerto Rico', gdpm: 102906, popk: 3474, gdpcap: 29621 }, { id: 29, country: 'Kuwait', gdpm: 114079, popk: 4110, gdpcap: 27756 }, { id: 30, country: 'South Korea', gdpm: 1377873, popk: 50617, gdpcap: 27221 }, { id: 31, country: 'Spain', gdpm: 1199715, popk: 46423, gdpcap: 25843 }, { id: 32, country: 'The Bahamas', gdpm: 8854, popk: 364, gdpcap: 24324 }, { id: 33, country: 'Bahrain', gdpm: 31119, popk: 1294, gdpcap: 24048 }, { id: 34, country: 'Cyprus', gdpm: 19330, popk: 847, gdpcap: 22821 }, { id: 35, country: 'Malta', gdpm: 9752, popk: 429, gdpcap: 22731 }, { id: 37, country: 'Slovenia', gdpm: 42798, popk: 2063, gdpcap: 20745 }, { id: 38, country: 'Saudi Arabia', gdpm: 646002, popk: 31386, gdpcap: 20582 }, { id: 39, country: 'Portugal', gdpm: 199032, popk: 10411, gdpcap: 19117 }, { id: 40, country: 'Trinidad and Tobago', gdpm: 24631, popk: 1358, gdpcap: 18137 }, { id: 41, country: 'Greece', gdpm: 195320, popk: 10858, gdpcap: 17988 }, { id: 42, country: 'Czech Republic', gdpm: 185156, popk: 10538, gdpcap: 17570 }, { id: 43, country: 'Estonia', gdpm: 22704, popk: 1313, gdpcap: 17291 }, { id: 44, country: 'Equatorial Guinea', gdpm: 13819, popk: 799, gdpcap: 17295 }, { id: 45, country: 'Oman', gdpm: 64121, popk: 3840, gdpcap: 16698 }, { id: 46, country: 'St. Kitts and Nevis', gdpm: 915, popk: 56, gdpcap: 16339 }, { id: 47, country: 'Palau', gdpm: 287, popk: 18, gdpcap: 15944 }, { id: 48, country: 'Slovakia', gdpm: 86629, popk: 5421, gdpcap: 15980 }, { id: 49, country: 'Barbados', gdpm: 4385, popk: 280, gdpcap: 15660 }, { id: 50, country: 'Uruguay', gdpm: 53107, popk: 3416, gdpcap: 15546 } ]; }
body { margin-bottom: 24px; } label { margin-right: 3px; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);