WjAutoComplete Class

The default value for this property is true.

The default value for this property is false, which causes the control to search for items that contain the given search terms.

The default value for this property is false.

For most drop-down controls, this property is set to ClickAction.Select by default. This setting allows users to select portions of the text with the mouse.

For drop-down controls that display non-editable text (such as the MultiSelect), this property is set to ClickAction.Toggle by default.

The default value for this property is wj-state-match.

The default value for this property is 500 milliseconds.

This property is useful when styling the drop-down element, because it is shown as a child of the document body rather than as a child of the control itself, which prevents using CSS selectors based on the parent control.

The default value for this property is true.

The default value for this property is null, which causes the control to display the same content in the input element as in the selected item of the drop-down list.

Use this property if you want to decouple the value shown in the input element from the values shown in the drop-down list. For example, the input element could show an item's name and the drop-down list could show additional detail.

Use this property in situations where you want to customize the attributes of the input element.

The default value for this property is 'text'.

The default value for this property is false.

The default value for this property is false.

Disabled controls cannot get mouse or keyboard events.

The default value for this property is false.

The default value for this property is false on the ComboBox control, and true on the AutoComplete and InputTime controls.

The default value for this property is false.

This property defaults to true for most controls, including ComboBox, InputDate, InputTime, InputDateTime, and InputColor. It defaults to false for the AutoComplete control.

If the formatting function needs a scope (i.e. a meaningful 'this' value), then remember to set the filter using the 'bind' function to specify the 'this' object. For example:

comboBox.itemFormatter = customItemFormatter.bind(this);
function customItemFormatter(index, content) {
    if (this.makeItemBold(index)) {
        content = '<b>' + content + '</b>';
    }
    return content;
}

Setting this property to an array causes the ComboBox to create an internal ICollectionView object that is exposed by the ComboBox.collectionView property.

The ComboBox selection is determined by the current item in its ComboBox.collectionView. By default, this is the first item in the collection. You may change this behavior by setting the wijmo.CollectionView.currentItem property of the ComboBox.collectionView to null.

The function takes three parameters:

• the query string typed by the user
• the maximum number of items to return
• the callback function to call when the results become available

For example:

autoComplete.itemsSourceFunction: (query: string, max: number, callback: Function) => {

    // query the server
    httpRequest('https://services.odata.org/Northwind/Northwind.svc/Products', {
        data: {
            $format: 'json',
            $select: 'ProductID,ProductName',
            $filter: 'indexof(ProductName, \'' + query + '\') gt -1'
        },
        success: (xhr: XMLHttpRequest) => {

            // return results to AutoComplete control
            let response = JSON.parse(xhr.response);
            callback(response.d ? response.d.results : response.value);
        }
    });
}

The default value for this property is 200 pixels.

The width of the drop-down list is also limited by the width of the control itself (that value represents the drop-down's minimum width).

The default value for this property is null, which means the drop-down has no maximum width limit.

The default value for this property is 6.

The default value for this property is 2.

By default, the AutoComplete control searches for matches against the property specified by the displayMemberPath property. The searchMemberPath property allows you to search using additional properties.

For example, the code below would cause the control to display the company name and search by company name, symbol, and country:

import { AutoComplete } from '@grapecity/wijmo.input';
var ac = new AutoComplete('#autoComplete', {
  itemsSource: companies,
  displayMemberPath: 'name',
  searchMemberPath: 'symbol,country'
});

If the selectedValuePath property is not set, gets or sets the value of the control's selectedItem property.

If the itemsSource property is not set, gets or sets the value of the control's text property.

The default value for this property is true.

Data groups are created by modifying the ICollectionView.groupDescriptions property of the ICollectionView object used as an itemsSource.

The default value for this property is false.

tabindex attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.

Because of this, to read or change control's tabindex dynamically, you should do it using this property.

The default value for this property is true.

To see leading and trailing spaces in the drop-down list items, you may have to apply a CSS rule such as this one:

.wj-listbox-item {
    white-space: pre;
}

The default value for this property is a very big number, meaning virtualization is disabled. To enable virtualization, set its value to 0 or a positive number.

For more detals, please see the {@link ListBox.virtializationThreshold} property.