j-SearchBox

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

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

ΕΠΙΤΡΟΦΗ:

Το 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 άδεια.

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>