ForgeComponents
el

Components

j-Search

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

Αυτό το στοιχείο μπορεί να εμφανίσει / κρύψει στοιχεία σύμφωνα με τη φράση αναζήτησης.


ΕΠΙΤΡΟΦΗ:

  • selector {String} jQuery επιλέκτης αναζήτησης
  • Το χαρακτηριστικό στοιχείου attribute {String} που περιέχει μια φράση αναζήτησης (προεπιλογή: data-search)
  • Το class {String} αυτή η κατηγορία θα χρησιμοποιηθεί εάν το στοιχείο δεν βρίσκεται (προεπιλεγμένο: hidden)
  • delay {Number} καθυστέρηση πληκτρολόγησης (προεπιλεγμένη: 50 ms)
  • delaydatasource {Number} μια καθυστέρηση για την επανεξέταση όταν η πηγή δεδομένων αλλάζει (προεπιλεγμένη: 100 ms)
  • UPD exec {String} ένα σύνδεσμο με το function(stats:{ total: Number, count: Number, hidden: Number, search: String, is: Boolean }) το οποίο θα αξιολογηθεί εάν το στοιχείο αναζητά κάτι
  • datasource {String}: Ο δρόμος προς την πηγή δεδομένων για την παρακολούθηση των αλλαγών
  • Το splitwords {Boolean} προσπαθεί να βρει τη λέξη σε διάφορες θέσεις (επιλογή: true)
  • NEW custom {String} ένα μονοπάτι στο Function(element, search) must return Boolean για προσαρμοσμένη αναζήτηση

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

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

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

Χρησιμοποιήστε το με <ui-component name="search">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, 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="search" path="search" config="selector:div">
	<div data-search="Apples">Apples</div>
	<div data-search="Oranges">Oranges</div>
	<div data-search="Pears">Pears</div>
	<div data-search="Black-eye bean">Black-eye bean</div>
	<div data-search="Broccoli">Broccoli</div>
</ui-component>

<script>
	var search = '';
</script>