Vaadin Elements - Combo Box - Remote and Custom Filtering

Overview

By default, vaadin-combo-box is used with an array of items that are filtered internally to display only the items that match the input the user has typed. The algorithm used is a simple case insensitive search.

Next, we’re going to go through how you can do filtering remotely, and also how to customize the filtering on the client side.

Custom Filtering

By default, the internal client side filtering is run every time the user types something into the input field. To bypass that, you should set an pre-filtered array of items into filteredItems instead of using items.

When you want to customize filtering on the client side, you can listen for changes on the filter and update filteredItems based on any criteria.

<vaadin-combo-box filtered-items="[[filteredItems]]" on-filter-changed="_filterChanged">
</vaadin-combo-box>

<script>
  ...
  _filterChanged: function(e) {
    // case-sensitive filtering
    var filter = e.detail.value;
    this.filteredItems = elements.filter(function(el) {
      return el.indexOf(filter) !== -1;
    });
  }
  ...
</script>

Remote Filtering

In case you want to use an asynchronous, remote data source together with filteredItems you can also set loading to true while your data is loading to display a loading spinner.

You can combine these properties together with iron-ajax as follows:

<iron-ajax url="http://example.org/?filter=[[filter]]"
           last-response={{response}}
           loading="{{loading}}"
           debounce-duration="500" auto>
</iron-ajax>

<vaadin-combo-box filtered-items="[[response]]" filter="{{filter}}" loading="[[loading]]">
</vaadin-combo-box>
When vaadin-combo-box is closed, filter changes to an empty string.