The Input Search component is a relatively new Oracle JET component that provides an input component where a user can type a search term, combined with a list of options to further help the user. It is useful for cases where you want to let the user put in free search terms, but at the same time provide some suggestions that can help them focus their search. The suggestion list can be, for example, the most frequently used search items, or a list of some options that match what the user started to type.
You can check out some demos of the inputSearch functionality in the JET Cookbook. The component combines capabilities you'll usually use a selectSingle component with the capabilities of a regular input text (and a built-in search icon). You have full control over the list of values that will be shown in the component. Beyond selecting an option from the list, the user is free to type any other value into the field. You can then catch the valueChange event of the component and execute an action chain to do a search.
In the video below, I'm focusing on using the component and setting various aspects of its behavior. I skipped showing how to use the value entered to filter a list and show search results as that would be similar to the techniques covered in various other blogs such as this one.
The quick start associated with the component in the Visual Builder design time makes it easy to bind a base list of suggestion to the field. The video then shows how to display additional fields in the list, filter the list based on multiple columns, and associate the selection to an Oracle JET dynamic form to show the results. (If you are not familiar with the dynamic components check out this intro.)
One advantage of the dynamic form is that it provides a declarative way to add a form that shows multiple fields to your page. All without the need to manually define UI components one-by-one, creating a type and a variable to track the record and hooking them to the UI manually – now you just do this in one simple step.
Check out the complete development demo here:
The code for the af:inputSearch in the page ends up being:
<oj-input-search class="oj-flex-item oj-sm-12 oj-md-6" suggestions="[[$page.variables.laptopsListSDP]]"
suggestion-item-text="modelName" raw-value="{{ $variables.myrawSearch }}"
on-oj-value-action="[[$listeners.ojInputSearchOjValueAction]]">
<template slot="suggestionItemTemplate">
<oj-highlight-text text='[[ $current.data.modelName + " - " + $current.data.cPU ]]'
match-text="[[ $variables.myrawSearch ]]"></oj-highlight-text>
</template>
</oj-input-search>