Filtering in AutoComplete

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

If you want to keep control of the filter, set the itemsSource property to your filtered CollectionView's items property. AutoComplete creates a new CollectionView for its internal use, and the original filtering in the CollectionView is preserved.

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

HTML

 <div id="theAutoComplete"></div>

Javascript

import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';
import { getData } from './data';

function init() {
    // create a filtered CollectionView to use as a data source
    let view = new wijmo.CollectionView(getData(), {
        filter: theFilterFunction
        });

    // create the AutoComplete using the CollectionView's items as a source
    let theAutoComplete = new input.AutoComplete('#theAutoComplete', {
        displayMemberPath: 'country',
        itemsSource: view.items
        });

    // our filter function
    function theFilterFunction(item) {
        return item.popk > 50000;
        }   

}