AutoComplete Async Loading

The AutoComplete control can load items asysnchronously in the dropdown menu as the input changes. This is useful when the number of items is very large. This sample uses the AutoComplete's itemsSourceFunction property to dynamically load data to the AutoComplete's dropdown. Try typing "ch" or "chi" and waiting a second to see the drop-down.

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'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // AutoComplete with async search using OData source let theAutoComplete = new input.AutoComplete('#theAutoComplete', { placeholder: 'Product Name', displayMemberPath: 'ProductName', itemsSourceFunction: (query, max, callback) => { if (!query) { callback(null); return; } // wijmo.httpRequest('https://services.odata.org/Northwind/Northwind.svc/Products', { data: { $format: 'json', $select: 'ProductID,ProductName', $filter: 'indexof(ProductName, \'' + query + '\') gt -1' }, success: (xhr) => { let response = JSON.parse(xhr.response); callback(response.d ? response.d.results : response.value); } }); }, selectedIndexChanged: function () { let product = theAutoComplete.selectedItem; document.querySelector('#msg').textContent = product ? wijmo.format('{ProductName} (ID: {ProductID})', product) : 'None'; } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity AutoComplete Async Loading</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="theAutoComplete">AutoComplete:</label> <div id="theAutoComplete"></div> </div> <p> Selected product: <b id="msg">None</b> </p> </div> </body> </html> body { margin-bottom: 24px; } label { margin-right: 3px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { getItemBySearch(query: string, max: number, callback: Function) { if (!query) { callback(null); return; } // wijmo.httpRequest('https://services.odata.org/Northwind/Northwind.svc/Products', { data: { $format: 'json', $select: 'ProductID,ProductName', $filter: 'indexof(ProductName, \'' + query + '\') gt -1' }, success: (xhr: XMLHttpRequest) => { let response = JSON.parse(xhr.response); callback(response.d ? response.d.results : response.value); } }); } } // @NgModule({ imports: [WjInputModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity AutoComplete Async Loading</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="form-group"> <label for="theAutoComplete">AutoComplete:</label> <wj-auto-complete #theAutoComplete id="theAutoComplete" [placeholder]="'Product Name'" [displayMemberPath]="'ProductName'" [itemsSourceFunction]="getItemBySearch"> </wj-auto-complete> </div> <p> Selected product: <b *ngIf="theAutoComplete.selectedItem as s; else none"> {{ s.ProductName }} (ID: {{ s.ProductID }}) </b> <ng-template #none><b>None</b></ng-template> </p> </div> body { margin-bottom: 24px; } label { margin-right: 3px; } <template> <div class="container-fluid"> <div class="form-group"> <label for="theAutoComplete">AutoComplete:</label> <wj-auto-complete id="theAutoComplete" :placeholder="'Product Name'" :displayMemberPath="'ProductName'" :itemsSourceFunction="getItemBySearch" :selectedIndexChanged="onSelectedIndexChanged"> </wj-auto-complete> </div> <p>Selected product: <b v-if="selectedItem"> {{ selectedItem.ProductName }} (ID: {{ selectedItem.ProductID }}) </b> <b v-else> none </b> </p> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.input'; let App = Vue.extend({ name: 'app', data: function () { return { selectedItem: null } }, methods: { getItemBySearch: function(query, max, callback){ if (!query) { callback(null); return; } wijmo.httpRequest('https://services.odata.org/Northwind/Northwind.svc/Products', { data: { $format: 'json', $select: 'ProductID,ProductName', $filter: 'indexof(ProductName, \'' + query + '\') gt -1' }, success: (xhr) => { let response = JSON.parse(xhr.response); callback(response.d ? response.d.results : response.value); } }); }, onSelectedIndexChanged: function (sender) { this.selectedItem = sender.selectedItem; } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } label { margin-right: 3px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity AutoComplete Async Loading</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.vue'); </script> </head> <body> <div id="app"></div> </body> </html> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wijmo from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.react.input'; class App extends React.Component { constructor(props) { super(props); this.getItemBySearch = (query, max, callback) => { if (!query) { callback(null); return; } wijmo.httpRequest('https://services.odata.org/Northwind/Northwind.svc/Products', { data: { $format: 'json', $select: 'ProductID,ProductName', $filter: 'indexof(ProductName, \'' + query + '\') gt -1' }, success: (xhr) => { let response = JSON.parse(xhr.response); callback(response.d ? response.d.results : response.value); } }); }; this.onSelectedIndexChanged = (sender) => { this.setState({ selectedItem: sender.selectedItem || {}, selectedItemIsNull: !(!!sender.selectedItem) }); }; this.state = { selectedItem: {}, selectedItemIsNull: true }; } render() { return <div className="container-fluid"> <div className="form-group"> <label htmlFor="theAutoComplete">AutoComplete:</label> <wjInput.AutoComplete id="theAutoComplete" placeholder="Product Name" displayMemberPath="ProductName" itemsSourceFunction={this.getItemBySearch} selectedIndexChanged={this.onSelectedIndexChanged}> </wjInput.AutoComplete> </div> <p>Selected product: <b> {this.state.selectedItemIsNull ? 'None' : this.state.selectedItem.ProductName + '(ID:' + this.state.selectedItem.ProductID + ')'} </b> </p> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</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 id="app"></div> </body> </html> body { margin-bottom: 24px; } label { margin-right: 3px; }