# j-SearchData

> This component tries to filter data according to the search phrase.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 5a504ccb320d0b1ecfb497220e63518807b9f39b28283a4c3662cbb7a0e0e8e3
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

This component tries to filter data according to the search phrase.


__Configuration__:

- `datasource {String}` __required__ - a path to the data-source with list of items `Array`
- `output {String}` __required__ - a path for filtered items
- `key {String}` __required__ - a key/property name for searching (default: `name`)
- `delay {Number}` a delay (default: `50` ms)
- `splitwords {Boolean}` tries to find word in various position (default: `true`)

__Good to know__:

This component adds classes below automatically when:

- class `ui-search-used` is added when the user searches for something
- class `ui-search-empty` is added when the user searches for something and at the same time nothing was found

Use it with `<ui-component name="searchdata">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<ui-component name="textbox" path="search" config="type:search"></ui-component>
<br />
<ui-component name="searchdata" path="search" config="datasource:searchitems;output:searchoutput">
	<ui-bind path="searchoutput" config="template" class="block">
		<script type="text/html">
			{{ foreach m in value }}
				<div>{{ m.name }}</div>
			{{ end }}
		</script>
	</ui-bind>
</ui-component>

<script>

	// Search phrase
	var search = '';

	// Datasource for filtering
	var searchitems = [{ name: 'Apples' }, { name: 'Oranges' }, { name: 'Pears' }, { name: 'Black-eye bean' }, { name: 'Broccoli' }];

	// Here will be stored all filtered items
	var searchoutput = [];

</script>
```