# j-SearchBox

> Το στοιχείο περιέχει ένα πλαίσιο αναζήτησης (εισαγωγή).

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 6c93248f3d25de27c3dae1b31edc4b6c274af77fab37b6c0c330930b5aac5423
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Το στοιχείο περιέχει ένα πλαίσιο αναζήτησης (εισαγωγή).


__ΕΠΙΤΡΟΦΗ__:

- Το `exec {String}` συνδέεται με το `function(model, component, changetype)`, θα εκτελεστεί εάν ο χρήστης πιέσει
- Το `autocomplete {String}` συνδέεται με το `function(component, input)`, θα εκτελεστεί εάν ο χρήστης επικεντρωθεί στο πλαίσιο αναζήτησης
- `init {String}` ένα σύνδεσμο με το `function(component)`, θα εκτελεστεί εάν η συστατική είναι αρχική
- `placeholder {String}` για το κουτί αναζήτησης
- Ο τύπος καθαρισμού `cleartype {Boolean}` όταν ο χρήστης θα εκτελέσει το `ESC` (προεπιλεγμένο: `false`)
- `keypress {Boolean}` κλειδί-εγγραφή δεσμεύσεις (προεπιλεγμένη: `false`)
- Το `autotrim {Boolean}` αποστέλλει την τιμή αυτόματα (προεπιλεγμένο: `true`)
- `clicktype {String}` ένα σύνδεσμο με το `function(component, currenttype, currentvalue)`, θα εκτελεστεί εάν ο χρήστης κάνει κλικ στο `type` (ένα νέο `type` πρέπει να ρυθμιστεί μέσω του `component.type(html, value)`)

__Μέθοδοι__:

- Το `component.type(html, id, [noemit])` προσθέτει έναν νέο τύπο πριν από την είσοδο αναζήτησης
- Το `component.enter()` πραγματοποιεί αναζήτηση με μη αυτόματο τρόπο
- __NEW__: `component.show()` επικεντρώνεται στην εισαγωγή

Χρησιμοποιήστε το με `<ui-component name="searchbox">`Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, 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>
```