# j-SearchBox

> Skład zawiera pudełko wyszukiwania (wstęp).

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pl
Content-SHA256: 0e44aa4fca4d384d5d2ec6d435c351e06f3c569a1416ac1432ee7491a17537d4
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Skład zawiera pudełko wyszukiwania (wstęp).


__Konfiguracja__:

- `exec {String}` jest linkem do `function(model, component, changetype)`, zostanie on wypełniony, jeśli użytkownik naciśni
- `autocomplete {String}` link do `function(component, input)`, będzie wykonywany, jeśli użytkownik koncentruje się na polu wyszukiwania
- `init {String}` jest linkem do `function(component)`, zostanie on wykonany, jeśli składnik jest inicjalizowany
- `placeholder {String}` miejsce dla wyszukiwarki
- Typ czyszczenia `cleartype {Boolean}`, gdy użytkownik będzie wykonywać `ESC` (default: `false`)
- `keypress {Boolean}` wiążący klawiaturę (default: `false`)
- `autotrim {Boolean}` automatycznie wysyła wartość (default: `true`)
- `clicktype {String}` jest linkem do `function(component, currenttype, currentvalue)`, będzie wykonywany, jeśli użytkownik kliknie na `type` (nowy `type` musi być ustawiony za pośrednictwem `component.type(html, value)`)

__Metody__:

- `component.type(html, id, [noemit])` dodaje nowy typ przed wejściem wyszukiwania
- `component.enter()` wykonuje wyszukiwanie ręcznie
- __NEW__: `component.show()` koncentruje się na wejściu

Użyj go z `<ui-component name="searchbox">`Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu `DEF.fallback` (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT.

```html example.html
<ui-component name="menu"></ui-component>
<ui-component name="searchbox" config="exec:searchbox_enter;clicktype:searchbox_type;init:searchbox_init;placeholder:Search and press enter ..."></ui-component>

<script>
	function searchbox_enter(model, component) {

		// model.type
		// model.value

		alert(model.type + ': ' + model.value);
    }

    function searchbox_init(component) {
    	component.type('<i class="ti ti-user"></i> By name', 'name', true);
    }

    function searchbox_type(component) {
    	var opt = {};
		opt.items = [{ name: 'By name', value: 'name', icon: 'user' }, { name: 'By subject', value: 'subject', icon: 'text-width' }, { name: 'By body', value: 'body', icon: 'file-alt' }];
		opt.align = 'left';
		opt.element = component.element;
		opt.callback = function(selected) {
			component.type('<i class="ti ti-{0}"></i> {1}'.format(selected.icon, selected.name), selected.value, true);
		};
		SETTER('menu', 'show', opt);
    }

</script>
```