Search Component

UI/Search is a simple component which displays a search bar. It can display the results or just provide the bar itself. It is widely used on the admin panel for searching content behind the scenes.

Render a search bar

A simple search bar which displays its own results is as follows:

import Search from 'UI/Search';

..

<Search for='page' field='url' onFind={page => { ..do something with page.. }}/>

This will search the content type called "Page" by checking if the "Url" field contains the specified text, then list the results using the default rendering as a suggestions dropdown. When one of the suggestions is clicked on, onFind is triggered with the selected page.

Custom results handling

In many cases though you'll just want to have the search bar just provide you with the inputted text - i.e. it just visually looks like a search bar and does nothing else. The search component provides a debounced onQuery prop which can be used to update other filters - particularly ones used by Loop. Because it is already debounced, you won't need to worry about fast typers spamming a server - as would be the case if you directly used input onChange or keyup events.

import Search from 'UI/Search';

..

<Search onSearch={text => {
 .. do something with the searched for text here ..
}}/>

The resulting text is then often well paired with <Loop> to create filtered results.

import Loop from 'UI/Loop';

<Loop over='page' filter={{where: {
    url: {contains: theSearchText}
}}}>
{page => {

.. render page as you wish here..

}}</Loop>