VBCS - Search for required option before select in select One/select Single LOV

Summary

Unable to search the list data in selectOne/selectSingle component

Content

Could you please help us understand how to filter the list data in selectOne/selectSingle component.

 

Requirement:

User should be able to filter the Drop down by typing the values.

 

Issue:

Currently its just highlighting but not filtering the unrelated values and if matching value is at the end then user will not be able to find that matching result.

 

Please help us resolving this issue.

Regards,

Pavan Kumar T N

Code Snippet

<div class="oj-flex">
  <oj-label for="oj-select-single-1084591017-1" class="oj-flex-item oj-sm-12 oj-md-2">Select (Single)</oj-label>
  <oj-select-single id="oj-select-single-1084591017-1" class="oj-flex-item oj-sm-12 oj-md-4" data="[[$page.variables.getLovFromBIPListSDP2]]" item-text="NAME" placeholder="Select" value-item="{{ $variables.selectInput }}"></oj-select-single>
</div>
<div class="oj-flex">
  <oj-label for="oj-select-one-1084591017-1" class="oj-flex-item oj-sm-12 oj-md-2">Select (One)</oj-label>
  <oj-select-one id="oj-select-one-1084591017-1" class="oj-flex-item oj-sm-12 oj-md-4" options="[[$page.variables.getLovFromBIPListSDP3]]" options-keys.value="VALUE" options-keys.label="NAME" placeholder="Select" value="{{ $page.variables.seelctSingleValue }}" value-option="{{ $variables.selectInput }}"></oj-select-one>
</div>