A common requirement is to use oj-input-search suggestions backed by an SDP (Service Data Provider) and return matches where the typed text appears anywhere in the suggestion text (contains), not only at the beginning (startsWith).

Example:

  • User types: Bank
  • Current results (startsWith): Bank Name, Bank Name2
  • Expected results (contains): Bank Name, Bank Name2, Name of Bank, Star Bank

In real integrations (for example, querying bank names from a REST service), users often report that searching for National does not return entries like Saudi National Bank, because the effective filter behaves like LIKE 'National%'.

Root Cause

Even if you define filterCriterion using $co (contains), the service call may not be filtered as expected unless the SDP can translate the typed search text into the correct REST filter/query format.

Symptoms you may see when this translation is missing or incomplete:

  • The UI highlights matched text in bold, but results are not actually filtered server-side.
  • Only the “default” number of suggestions (e.g., the first 12) appear, regardless of the search term.
  • The outgoing request shows an effective startsWith clause such as LIKE 'text%'.

This happens because the SDP needs a custom request filter transform so it can map the input-search’s text value (options.text) into a filter expression that the endpoint understands.

Solution Overview

Implement a request filter transform for the SDP:

  1. Declare which attribute(s) are text-filterable via transformsContext.vb-textFilterAttributes
  2. Add a transforms.request.filter hook pointing to a custom JavaScript function
  3. In the function, force the operator to $co (contains) and delegate to the standard filter builder (BOTransforms.request.filter)

Implementation

Step 1: Configure the SDP to use a request filter transform

In your SDP variable, add:

  • transformsContext to specify the attribute to filter on
  • transforms.request.filter to call your function
"bankDetailsSDP": {
  "type": "vb/ServiceDataProvider",
  "defaultValue": {
    "endpoint": "businessObjects/getall_Banks",
    "keyAttributes": "@value",
    "itemsPath": "items",
    "responseType": "getallBanksResponse",
    "transformsContext": {
      "vb-textFilterAttributes": [
        "bankName"
      ]
    },
    "transforms": {
      "request": {
        "filter": "{{ $functions.processFilter }}"
      }
    }
  }
}

Replace bankName with your suggestion display/search attribute.

Step 2: Add the transform function (JavaScript)

Create the following function (typically in the page/module functions where you maintain custom logic):

processFilter(configuration, options, transformsContext) {
  const textValue = options && options.text;

  const textFilterAttribute =
    transformsContext &&
    transformsContext["vb-textFilterAttributes"] &&
    transformsContext["vb-textFilterAttributes"][0];

  // Convert input-search text into a "contains" filter criterion
  const containsFilter = {
    attribute: textFilterAttribute,
    op: "$co",            // contains
    value: textValue
  };

  // Delegate to the standard request filter transform
  return BOTransforms.request.filter(configuration, containsFilter);
}

What this does:

  • Reads the user’s typed string from options.text
  • Builds a filter criterion using $co (contains)
  • Ensures the SDP sends a server-side filtered request (instead of just client-side highlighting)

Step 3: Bind the SDP to oj-input-search suggestions

Bind the SDP variable to the suggestions attribute:

<oj-input-search
  class="oj-flex-item oj-sm-12 oj-md-6"
  suggestions="[[$variables.bankDetailsSDP]]"
  suggestion-item-text="bankName">
</oj-input-search>

Testing Steps (Recommended)

  1. Open browser developer tools → Network tab
  2. Type a mid-string search term (example: National)
  3. Confirm the service request includes a filter consistent with contains, not only startsWith
  4. Validate that values where the search term appears in the middle are included: Saudi National Bank should appear when searching National

Troubleshooting Tips

  • Only bold highlighting, no filtering:
    This usually means the request transform is not being applied, or the endpoint is not using the translated filter. Verify transforms.request.filter is present and pointing to the correct function.
  • Still behaves like startsWith:
    Inspect the request query. If it contains a LIKE 'text%' clause, the effective logic is startsWith. Ensure your filter transform forces $co.
  • Multiple searchable fields:
    If you want to search across multiple attributes, extend the transform to build a compound criterion (depending on your service’s supported query syntax).

Summary

To make oj-input-search suggestions behave like contains with an SDP, you typically need more than just filterCriterion. Implement a custom request filter transform so the typed text is translated into the correct server-side filter expression – ensuring the service returns the right matches and the UI shows complete suggestions.