Multiple search term for input field filters?

[ptatoChi]

Is it possible to have multiple search terms in an input field

like Hello*, Hallo* in the search term field of the column

[ghiscoding]

The only filters with multiple values are with a multiple select dropdown or by using range 5..15. The values you shown cannot be currently filtered with built-in filters but you can achieve this by creating your own filter, see Custom Filter - Wiki and see Example 3 and/or Example 22 for demos of custom filters

[ptatoChi]

Hi :D

I think this.callback limits me to filter data on my own. I tried multiple operators with no luck.

this.callback(e, { columnDef: this.columnDef, operator: this.operator, searchTerms: [value.split(',')], shouldTriggerQuery: this._shouldTriggerQuery });

I tried creating my own callback, but I think i'll need to understand how this this._onSearchChange.notify(eventArgs, eventData); work

[ghiscoding]

I don't know why you try to implement a different callback but that probably won't work, this._onSearchChange is only used internally in the FilterService to know that a filter change got triggered, you should never have to play with that at all. It looks like you're trying to overcomplicate things.

What you should try to do is to see how the Select Filter (single/multiple) works and implement something similar, if you look at this code

https://github.com/ghiscoding/slickgrid-universal/blob/d0179120567186f505e44e4d19b8965b02ff2511/packages/common/src/filters/selectFilter.ts#L439-L448

this.callback(undefined, { columnDef: this.columnDef, operator: this.operator, searchTerms: selectedItems, shouldTriggerQuery: this._shouldTriggerQuery });

you should use something similar and use any of the available Operators available, in your case maybe Operator.in or Operator.inContains and then the searchTerms should the values that you split to an array... that should be it for your custom filter to work

https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/enums/operatorType.enum.ts

Also worth to know that all Filters are extendable so technically you could simply extend an existing Filter by overriding any of its functions, for example just extend the input filter and override the onTriggerEvent method

here is an example, I override the onTriggerEvent by copying all current code, available here, and then only changed how the callback is called so that I split the CSV values

class MyCustomInputFilter extends InputFilter {
  protected onTriggerEvent(event?: MouseEvent | KeyboardEvent, isClearFilterEvent = false) {
    if (isClearFilterEvent) {
      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: isClearFilterEvent, shouldTriggerQuery: this._shouldTriggerQuery });
      this._filterContainerElm.classList.remove('filled');
    } else {
      const eventType = event?.type ?? '';
      const selectedOperator = (this._selectOperatorElm?.value ?? this.operator) as OperatorString;
      let value = this._filterInputElm.value;
      const enableWhiteSpaceTrim = this.gridOptions.enableFilterTrimWhiteSpace || this.columnFilter.enableTrimWhiteSpace;
      if (typeof value === 'string' && enableWhiteSpaceTrim) {
        value = value.trim();
      }

      if ((event?.target as HTMLElement)?.tagName.toLowerCase() !== 'select') {
        this._currentValue = value;
      }

      value === '' ? this._filterContainerElm.classList.remove('filled') : this._filterContainerElm.classList.add('filled');
      const callbackArgs = { columnDef: this.columnDef, operator: selectedOperator, searchTerms: (value ? [value] : null), shouldTriggerQuery: this._shouldTriggerQuery };
      const typingDelay = (eventType === 'keyup' && (event as KeyboardEvent)?.key !== 'Enter') ? this._debounceTypingDelay : 0;

      const skipCompoundOperatorFilterWithNullInput = this.columnFilter.skipCompoundOperatorFilterWithNullInput ?? this.gridOptions.skipCompoundOperatorFilterWithNullInput;
      if (this.inputFilterType === 'single' || !skipCompoundOperatorFilterWithNullInput || this._currentValue !== undefined) {
        if (typingDelay > 0) {
          clearTimeout(this._timer as NodeJS.Timeout);
          this._timer = setTimeout(() => this.callback(event, callbackArgs), typingDelay);
        } else {
-          // this.callback(event, callbackArgs);
+          this.callback(undefined, { columnDef: this.columnDef, operator: this.operator, searchTerms: value.split(','), shouldTriggerQuery: this._shouldTriggerQuery });
        }
      }
    }

    // reset both flags for next use
    this._shouldTriggerQuery = true;
  }
}

and there you go, it works well as shown below

[ptatoChi]

thank you so much!!