diff --git a/src/components/listbox/ListBox.d.ts b/src/components/listbox/ListBox.d.ts index 3c90b2d89e..f2edd8c805 100755 --- a/src/components/listbox/ListBox.d.ts +++ b/src/components/listbox/ListBox.d.ts @@ -15,6 +15,8 @@ interface ListBoxProps { multiple?: boolean; metaKeySelection?: boolean; filter?: boolean; + filterBy?: string; + filterMatchMode?: string; filterPlaceholder?: string; tabIndex?:string; tooltip?: any; diff --git a/src/components/listbox/ListBox.js b/src/components/listbox/ListBox.js index dc85f27e20..b4059cbcd2 100644 --- a/src/components/listbox/ListBox.js +++ b/src/components/listbox/ListBox.js @@ -2,6 +2,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import ObjectUtils from '../utils/ObjectUtils'; +import FilterUtils from '../utils/ObjectUtils'; import {ListBoxItem} from './ListBoxItem'; import {ListBoxHeader} from './ListBoxHeader'; import Tooltip from "../tooltip/Tooltip"; @@ -23,6 +24,8 @@ export class ListBox extends Component { multiple: false, metaKeySelection: false, filter: false, + filterBy: null, + filterMatchMode: 'contains', filterPlaceholder: null, tabIndex: '0', tooltip: null, @@ -45,6 +48,8 @@ export class ListBox extends Component { multiple: PropTypes.bool, metaKeySelection: PropTypes.bool, filter: PropTypes.bool, + filterBy: PropTypes.string, + filterMatchMode: PropTypes.string, filterPlaceholder: PropTypes.string, tabIndex: PropTypes.string, tooltip: PropTypes.string, @@ -107,7 +112,7 @@ export class ListBox extends Component { } onOptionTouchEnd() { - if(this.props.disabled) { + if (this.props.disabled) { return; } @@ -120,11 +125,11 @@ export class ListBox extends Component { let value = null; let metaSelection = this.optionTouched ? false : this.props.metaKeySelection; - if(metaSelection) { + if (metaSelection) { let metaKey = (event.metaKey || event.ctrlKey); - if(selected) { - if(metaKey) { + if (selected) { + if (metaKey) { value = null; valueChanged = true; } @@ -139,7 +144,7 @@ export class ListBox extends Component { valueChanged = true; } - if(valueChanged) { + if (valueChanged) { this.updateModel(event, value); } } @@ -150,11 +155,11 @@ export class ListBox extends Component { let value = null; let metaSelection = this.optionTouched ? false : this.props.metaKeySelection; - if(metaSelection) { + if (metaSelection) { let metaKey = (event.metaKey || event.ctrlKey); - if(selected) { - if(metaKey) + if (selected) { + if (metaKey) value = this.removeOption(option); else value = [this.getOptionValue(option)]; @@ -168,7 +173,7 @@ export class ListBox extends Component { } } else { - if(selected) + if (selected) value = this.removeOption(option); else value = [...this.props.value || [], this.getOptionValue(option)]; @@ -176,7 +181,7 @@ export class ListBox extends Component { valueChanged = true; } - if(valueChanged) { + if (valueChanged) { this.props.onChange({ originalEvent: event, value: value, @@ -196,7 +201,7 @@ export class ListBox extends Component { } updateModel(event, value) { - if(this.props.onChange) { + if (this.props.onChange) { this.props.onChange({ originalEvent: event, value: value, @@ -262,11 +267,11 @@ export class ListBox extends Component { let items = this.props.options; let header; - if(this.props.options) { - if(this.hasFilter()) { - items = items.filter((option) => { - return this.filter(option); - }); + if (this.props.options) { + if (this.hasFilter()) { + let filterValue = this.state.filter.trim().toLowerCase(); + let searchFields = this.props.filterBy ? this.props.filterBy.split(',') : [this.props.optionLabel || 'label']; + items = FilterUtils.filter(items, searchFields, filterValue, this.props.filterMatchMode); } items = items.map((option, index) => { @@ -279,7 +284,7 @@ export class ListBox extends Component { }); } - if(this.props.filter) { + if (this.props.filter) { header = } diff --git a/src/showcase/listbox/ListBoxDemo.js b/src/showcase/listbox/ListBoxDemo.js index 433d1636e7..ac895549b7 100644 --- a/src/showcase/listbox/ListBoxDemo.js +++ b/src/showcase/listbox/ListBoxDemo.js @@ -187,9 +187,10 @@ carTemplate(option) { `} - -

Filter

-

Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable filter property.

+

Filtering

+

Options can be filtered using an input field in the overlay by enabling the filter property. By default filtering is done against + label of the items and filterBy property is available to choose one or more properties of the options. In addition filterMatchMode can be utilized + to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".

{` @@ -341,6 +342,18 @@ carTemplate(option) { false When specified, displays a filter input at header. + + filterBy + string + label + When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. + + + filterMatchMode + string + contains + Defines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals". + filterPlaceholder string