Customize AutoComplete's Search Behavior

The AutoComplete exposes the delay, minLength, and maxItems property to customize the searching experience. This sample lets you configure the properties easily to see how the search behavior is modified.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // autoComplete let theAutoComplete = new input.AutoComplete('#theAutoComplete', { displayMemberPath: 'country', searchMemberPath: 'country,continent', itemsSource: getData() }); // // autoComplete configuration // let theDelay = new input.InputNumber('#theDelay', { value: theAutoComplete.delay, min: 0, max: 1500, step: 100, valueChanged: (sender) => { theAutoComplete.delay = sender.value; } }); // let theMinLength = new input.InputNumber('#theMinLength', { value: theAutoComplete.minLength, min: 1, max: 100, step: 1, valueChanged: (sender) => { theAutoComplete.minLength = sender.value; } }); // let theMaxItems = new input.InputNumber('#theMaxItems', { value: theAutoComplete.maxItems, min: 1, max: 12, step: 1, valueChanged: (sender) => { theAutoComplete.maxItems = sender.value; } }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity AutoComplete Search Parameters</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"> <label for="theDelay">delay:</label> <div id="theDelay"></div> </div> <div class="form-group"> <label for="theMinLength">minLength:</label> <div id="theMinLength"></div> </div> <div class="form-group"> <label for="theMaxItems">maxItems:</label> <div id="theMaxItems"></div> </div> <div class="form-group"> <label for="theAutoComplete">AutoComplete:</label> <div id="theAutoComplete"></div> </div> </div> </body> </html>
// list of country GDP and populations // https://en.wikipedia.org/wiki/List_of_IMF_ranked_countries_by_GDP export function getData() { return [ { id: 1, country: 'Luxembourg', continent: 'Europe', gdpm: 57825, popk: 563, gdpcap: 102708 }, { id: 2, country: 'Switzerland', continent: 'Europe', gdpm: 664005, popk: 8238, gdpcap: 80602 }, { id: 3, country: 'Norway', continent: 'Europe', gdpm: 388315, popk: 5205, gdpcap: 74604 }, { id: 4, country: 'Macao', continent: 'Asia', gdpm: 46178, popk: 647, gdpcap: 71372 }, { id: 5, country: 'Qatar', continent: 'Africa', gdpm: 166908, popk: 2421, gdpcap: 68941 }, { id: 6, country: 'Ireland', continent: 'Europe', gdpm: 283716, popk: 4635, gdpcap: 61211 }, { id: 7, country: 'United States', continent: 'America', gdpm: 18036650, popk: 321601, gdpcap: 56083 }, { id: 8, country: 'Singapore', continent: 'Asia', gdpm: 292734, popk: 5535, gdpcap: 52887 }, { id: 9, country: 'Denmark', continent: 'Europe', gdpm: 295091, popk: 5660, gdpcap: 52136 }, { id: 10, country: 'Australia', continent: 'Oceania', gdpm: 1225286, popk: 23940, gdpcap: 51181 }, { id: 12, country: 'Sweden', continent: 'Europe', gdpm: 493042, popk: 9851, gdpcap: 50049 }, { id: 13, country: 'San Marino', continent: 'Europe', gdpm: 1558, popk: 31, gdpcap: 50258 }, { id: 14, country: 'Netherlands', continent: 'Europe', gdpm: 750696, popk: 16937, gdpcap: 44322 }, { id: 15, country: 'United Kingdom', continent: 'Europe', gdpm: 2858482, popk: 65110, gdpcap: 43902 }, { id: 16, country: 'Austria', continent: 'Europe', gdpm: 374261, popk: 8621, gdpcap: 43412 }, { id: 17, country: 'Canada', continent: 'America', gdpm: 1550537, popk: 35825, gdpcap: 43280 }, { id: 18, country: 'Finland', continent: 'Europe', gdpm: 232077, popk: 5472, gdpcap: 42411 }, { id: 19, country: 'Germany', continent: 'Europe', gdpm: 3365293, popk: 82176, gdpcap: 40952 }, { id: 20, country: 'Belgium', continent: 'Europe', gdpm: 454288, popk: 11209, gdpcap: 40528 }, { id: 21, country: 'United Arab Emirates', continent: 'Africa', gdpm: 370296, popk: 9581, gdpcap: 38648 }, { id: 22, country: 'France', continent: 'Europe', gdpm: 2420163, popk: 64275, gdpcap: 37653 }, { id: 23, country: 'New Zealand', continent: 'Oceania', gdpm: 172257, popk: 4647, gdpcap: 37068 }, { id: 24, country: 'Israel', continent: 'Africa', gdpm: 299413, popk: 8377, gdpcap: 35742 }, { id: 25, country: 'Japan', continent: 'Asia', gdpm: 4124211, popk: 126981, gdpcap: 32478 }, { id: 26, country: 'Brunei Darussalam', continent: 'Africa', gdpm: 12930, popk: 417, gdpcap: 31007 }, { id: 27, country: 'Italy', continent: 'Europe', gdpm: 1815759, popk: 60796, gdpcap: 29866 }, { id: 28, country: 'Puerto Rico', continent: 'America', gdpm: 102906, popk: 3474, gdpcap: 29621 }, { id: 29, country: 'Kuwait', continent: 'Africa', gdpm: 114079, popk: 4110, gdpcap: 27756 }, { id: 30, country: 'South Korea', continent: 'Asia', gdpm: 1377873, popk: 50617, gdpcap: 27221 }, { id: 31, country: 'Spain', continent: 'Europe', gdpm: 1199715, popk: 46423, gdpcap: 25843 }, { id: 32, country: 'The Bahamas', continent: 'America', gdpm: 8854, popk: 364, gdpcap: 24324 }, { id: 33, country: 'Bahrain', continent: 'Africa', gdpm: 31119, popk: 1294, gdpcap: 24048 }, { id: 34, country: 'Cyprus', continent: 'Europe', gdpm: 19330, popk: 847, gdpcap: 22821 }, { id: 35, country: 'Malta', continent: 'Europe', gdpm: 9752, popk: 429, gdpcap: 22731 }, { id: 36, country: 'Taiwan', continent: 'Asia', gdpm: 523006, popk: 23492, gdpcap: 22263 }, { id: 37, country: 'Slovenia', continent: 'Europe', gdpm: 42798, popk: 2063, gdpcap: 20745 }, { id: 38, country: 'Saudi Arabia', continent: 'Africa', gdpm: 646002, popk: 31386, gdpcap: 20582 }, { id: 39, country: 'Portugal', continent: 'Europe', gdpm: 199032, popk: 10411, gdpcap: 19117 }, { id: 40, country: 'Trinidad and Tobago', continent: 'America', gdpm: 24631, popk: 1358, gdpcap: 18137 }, { id: 41, country: 'Greece', continent: 'Europe', gdpm: 195320, popk: 10858, gdpcap: 17988 }, { id: 42, country: 'Czech Republic', continent: 'Europe', gdpm: 185156, popk: 10538, gdpcap: 17570 }, { id: 43, country: 'Estonia', continent: 'Europe', gdpm: 22704, popk: 1313, gdpcap: 17291 }, { id: 44, country: 'Equatorial Guinea', continent: 'Africa', gdpm: 13819, popk: 799, gdpcap: 17295 }, { id: 45, country: 'Oman', continent: 'Africa', gdpm: 64121, popk: 3840, gdpcap: 16698 }, { id: 46, country: 'St. Kitts and Nevis', continent: 'America', gdpm: 915, popk: 56, gdpcap: 16339 }, { id: 47, country: 'Palau', continent: 'Asia', gdpm: 287, popk: 18, gdpcap: 15944 }, { id: 48, country: 'Slovakia', continent: 'Europe', gdpm: 86629, popk: 5421, gdpcap: 15980 }, { id: 49, country: 'Barbados', continent: 'America', gdpm: 4385, popk: 280, gdpcap: 15660 }, { id: 50, country: 'Uruguay', continent: 'America', gdpm: 53107, popk: 3416, gdpcap: 15546 } ]; }
label { width: 150px; text-align: right; margin-right: 3px; } body { margin-bottom: 24px; }
(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.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.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', '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);