Search Component - Revision history

Luke at 12:00, 23 May 2023

2023-05-23T12:00:17Z

← Older revision		Revision as of 12:00, 23 May 2023
Line 5:		Line 5:
	A simple search bar which displays its own results is as follows:		A simple search bar which displays its own results is as follows:

	<syntaxhighlight lang="~~jsx~~">		<syntaxhighlight lang="javascript">
	import Search from 'UI/Search';		import Search from 'UI/Search';

Line 20:		Line 20:
	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.		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.

	<syntaxhighlight lang="~~jsx~~">		<syntaxhighlight lang="javascript">
	import Search from 'UI/Search';		import Search from 'UI/Search';

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

	<syntaxhighlight lang="~~jsx~~">		<syntaxhighlight lang="javascript">
	import Loop from 'UI/Loop';		import Loop from 'UI/Loop';

Luke: /* Custom results handling */

2023-05-23T11:59:54Z

Custom results handling

← Older revision		Revision as of 11:59, 23 May 2023
Line 28:		Line 28:
	.. do something with the searched for text here ..		.. do something with the searched for text here ..
	}}/>		}}/>

			</syntaxhighlight>

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

			<syntaxhighlight lang="jsx">
			import Loop from 'UI/Loop';

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

			.. render page as you wish here..

			}}</Loop>

	</syntaxhighlight>		</syntaxhighlight>

Luke: /* Custom results handling */

2023-05-23T11:58:20Z

Custom results handling

← Older revision		Revision as of 11:58, 23 May 2023
Line 25:		Line 25:
	..		..

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

	</syntaxhighlight>		</syntaxhighlight>

Luke: Created page with "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 cont..."

2023-05-23T11:56:45Z

Created page with "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 cont..."

New page

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:

<syntaxhighlight lang="jsx">
import Search from 'UI/Search';

..

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

</syntaxhighlight>

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.

<syntaxhighlight lang="jsx">
import Search from 'UI/Search';

..

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

</syntaxhighlight>