filterWith option for field_value_selection filters

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Fixed issue with unselected tabs and aria-controls attribute in EuiTabbedContent
 - Added `tag` icon ([#1188](https://github.com/elastic/eui/pull/1188))
 - Replaced `logging` app icon ([#1194](https://github.com/elastic/eui/pull/1194))
+- Added `filterWith` option for `EuiSearchBar` filters of type `field_value_selection` ([#1328](https://github.com/elastic/eui/pull/1328))
 
 **Bug fixes**
 
@@ -16,7 +17,7 @@
 **Bug fixes**
 
 - Fixed an issue in `EuiTooltip` because IE1 didn't support `document.contains()` ([#1190](https://github.com/elastic/eui/pull/1190))
-- Fixed some issues around parsing string values in EuiSearchBar / EuiQuery ([#1189](https://github.com/elastic/eui/pull/1189))
+- Fixed some issues around parsing string values in `EuiSearchBar` and `EuiQuery` ([#1189](https://github.com/elastic/eui/pull/1189))
 
 ## [`4.0.0`](https://github.com/elastic/eui/tree/v4.0.0)
 

src/components/search_bar/filters/field_value_selection_filter.js

@@ -30,6 +30,7 @@ export const FieldValueSelectionFilterConfigType = PropTypes.shape({
   autoClose: PropTypes.boolean,
   name: PropTypes.string.isRequired,
   options: FieldValueOptionsType.isRequired,
+  filterWith: PropTypes.oneOfType([ PropTypes.func, PropTypes.oneOf([ 'prefix', 'includes' ]) ]),
   cache: PropTypes.number,
   multiSelect: PropTypes.oneOfType([ PropTypes.bool, PropTypes.oneOf([ 'and', 'or' ]) ]),
   loadingMessage: PropTypes.string,
@@ -48,6 +49,7 @@ const FieldValueSelectionFilterPropTypes = {
 const defaults = {
   config: {
     multiSelect: true,
+    filterWith: `prefix`,
     loadingMessage: 'Loading...',
     noOptionsMessage: 'No options found',
     searchThreshold: 10,
@@ -108,23 +110,41 @@ export class FieldValueSelectionFilter extends Component {
     });
   }
 
-  filterOptions(prefix = '') {
+  filterOptions(q = '') {
     this.setState(prevState => {
       if (isNil(prevState.options)) {
         return {};
       }
+
+      const predicate = this.getOptionFilter();
+
       return {
         options: {
           ...prevState.options,
-          shown: prevState.options.all.filter(option => {
-            const name = this.resolveOptionName(option);
-            return name.toLowerCase().startsWith(prefix.toLowerCase());
+          shown: prevState.options.all.filter((option, i, options) => {
+            const name = this.resolveOptionName(option).toLowerCase();
+            const query = q.toLowerCase();
+            return predicate(name, query, options);
           })
         }
       };
     });
   }
 
+  getOptionFilter() {
+    const filterWith = this.props.config.filterWith || defaults.config.filterWith;
+
+    if (typeof filterWith === 'function') {
+      return filterWith;
+    }
+
+    if (filterWith === 'includes') {
+      return (name, query) => name.includes(query);
+    }
+
+    return (name, query) => name.startsWith(query);
+  }
+
   resolveOptionsLoader() {
     const options = this.props.config.options;
     if (isArray(options)) {