Automatically add items to ComboBox and AutoComplete

You can add items to an AutoComplete or ComboBox controls by pushing an item onto the data source array. This example demonstrates how to add items to both controls.

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() { let countries = new wijmo.ObservableArray(['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']); // new input.ComboBox('#theCombo', { itemsSource: countries, isEditable: true, lostFocus: lostFocus }); // new input.AutoComplete('#theAutoComplete', { itemsSource: countries, lostFocus: lostFocus }); // new input.ListBox('#theList', { itemsSource: countries }); // // add item to the list when a control loses focus function lostFocus(sender) { let item = sender.text; if (item && countries.indexOf(item) < 0) { countries.push(item); } } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Auto-adding items to ComboBox and AutoComplete Controls</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"> <h3> ComboBox</h3> <p> Type an item that is not on the list and move the focus to another control to add an item.</p> <div id="theCombo"></div> <h3> AutoComplete</h3> <p> Type an item that is not on the list and move the focus to another control to add an item.</p> <div id="theAutoComplete"></div> <h3> Options</h3> <p> Here is the option list (it is updated as items are added to the list):</p> <div id="theList"></div> </div> </body> </html> .wj-listbox, .wj-dropdown { width: 250px; } 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 { 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 { countries = new wijmo.ObservableArray(['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']); // lostFocus(sender: input.ComboBox) { let item = sender.text; if (item && this.countries.indexOf(item) < 0) { this.countries.push(item); } } } // @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 Auto-adding items to ComboBox and AutoComplete Controls</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"> <h3> ComboBox</h3> <p> Type an item that is not on the list and move the focus to another control to add an item.</p> <wj-combo-box #combo [itemsSource]="countries" [isEditable]="true" (lostFocus)="lostFocus(combo)"> </wj-combo-box> <h3> AutoComplete</h3> <p> Type an item that is not on the list and move the focus to another control to add an item.</p> <wj-auto-complete #autoComplete [itemsSource]="countries" (lostFocus)="lostFocus(autoComplete)"></wj-auto-complete> <h3> Options</h3> <p> Here is the option list (it is updated as items are added to the list):</p> <wj-list-box [itemsSource]="countries"></wj-list-box> </div> .wj-listbox, .wj-dropdown { width: 250px; } <template> <div class="container-fluid"> <h3>ComboBox</h3> <p>Type an item that is not on the list and move the focus to another control to add an item.</p> <wj-combo-box :itemsSource="countries" :isEditable="true" :lostFocus="lostFocus"> </wj-combo-box> <h3>AutoComplete</h3> <p>Type an item that is not on the list and move the focus to another control to add an item.</p> <wj-auto-complete :itemsSource="countries" :lostFocus="lostFocus"></wj-auto-complete> <h3>Options</h3> <p>Here is the option list (it is updated as items are added to the list):</p> <wj-list-box :itemsSource="countries"></wj-list-box> </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 { countries: new wijmo.ObservableArray(['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']) } }, methods: { lostFocus: function(sender) { let item = sender.text; if (item && this.countries.indexOf(item) < 0) { this.countries.push(item); } } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .container-fluid .wj-listbox, .container-fluid .wj-dropdown { width: 250px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Auto-adding items to ComboBox and AutoComplete Controls</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.lostFocus = (sender) => { let item = sender.text; if (item && this.state.countries.indexOf(item) < 0) { this.state.countries.push(item); } }; this.state = { countries: new wijmo.ObservableArray(['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']) }; } render() { return <div className="container-fluid"> <h3>ComboBox</h3> <p>Type an item that is not on the list and move the focus to another control to add an item.</p> <wjInput.ComboBox itemsSource={this.state.countries} isEditable={true} lostFocus={this.lostFocus}> </wjInput.ComboBox> <h3>AutoComplete</h3> <p>Type an item that is not on the list and move the focus to another control to add an item.</p> <wjInput.AutoComplete itemsSource={this.state.countries} lostFocus={this.lostFocus}> </wjInput.AutoComplete> <h3>Options</h3> <p>Here is the option list (it is updated as items are added to the list):</p> <wjInput.ListBox itemsSource={this.state.countries}> </wjInput.ListBox> </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> .wj-listbox, .wj-dropdown { width: 250px; }