j-SearchBox

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Il componente contiene una casella di ricerca (input).

Configurazione:

exec {String} un collegamento al function(model, component, changetype), verrà eseguito se l'utente premere
autocomplete {String} un link al function(component, input), verrà eseguito se l'utente si concentra sulla casella di ricerca
init {String} un collegamento al function(component), verrà eseguito se il componente è inizializzato
placeholder {String} per la scatola di ricerca
cleartype {Boolean} chiude quando l'utente eseguirà ESC (default: false)
Il legame di stampa chiave keypress {Boolean} (default: false)
autotrim {Boolean} trasmette automaticamente il valore (default: true)
clicktype {String} un collegamento al function(component, currenttype, currentvalue), verrà eseguito se l'utente fa clic sul type (un nuovo type deve essere impostato tramite component.type(html, value))

Metodi:

component.type(html, id, [noemit]) aggiunge un nuovo tipo prima dell'ingresso di ricerca
component.enter() esegue la ricerca manualmente
NEW: component.show() si concentra sull'ingresso

Utilizzare con <ui-component name="searchbox">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>