3 types of search and filter patterns

Combo

Both search and filter functions will be performed in one bar.
A contextual menu opens when clicking on the search bar. Users can type and pick the filter items from a menu, or submit direct keywords to query the data. All input will be converted into input chips held in the bar.
When more than one chip is required, users can define a logic operator to join 2 chips in between. The default logic applied is ‘AND’.

|327.3930778430288x332

Split

The Split pattern contains a search bar and a filter dropdown.

It performs the filtering function via the dropdown, searching by users typing keywords on the search bar. But there is interactiveness linking the 2 components - the search bar will hold filter chips selected, string search chips, and logic operators users defined.

Split (Simple)
A pattern consists of a filter dropdown, a search bar, and/or other components.

It performs the filtering function via the dropdown, searching on the search bar.
There is no interactiveness between these 2 components.
Other components are optional to add, for example, sort and date picker.