j-SearchData

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

Αυτό το στοιχείο προσπαθεί να φιλτράρει τα δεδομένα σύμφωνα με τη φράση αναζήτησης.

ΕΠΙΤΡΟΦΗ:

datasource {String} απαιτείται - μια διαδρομή προς την πηγή δεδομένων με τη λίστα των στοιχείων Array
output {String} required - ένας δρόμος για τα φίλτρα
key {String} required - ένα όνομα κλειδιού / ιδιοκτησίας για την αναζήτηση (προεπιλογή: name)
delay {Number} μια καθυστέρηση (προεπιλεγμένη: 50 ms)
Το splitwords {Boolean} προσπαθεί να βρει τη λέξη σε διάφορες θέσεις (επιλογή: true)

Καλό να ξέρεις:

Αυτό το συστατικό προσθέτει αυτόματα τις κατηγορίες κάτω όταν:

Η κατηγορία ui-search-used προστίθεται όταν ο χρήστης αναζητά κάτι
Η κατηγορία ui-search-empty προστίθεται όταν ο χρήστης αναζητά κάτι και ταυτόχρονα δεν βρέθηκε τίποτα.

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

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>