Προσθέστε λέξη-κλειδί αναζήτησης Ανασηκώστε σε οποιαδήποτε ιστοσελίδα με Mark.js

Τα περισσότερα προγράμματα περιήγησης έχουν το CTRL + F λειτουργικότητα για να αναζητήσετε και να βρείτε ό, τι αναζητά ο χρήστης. Αλλά, αυτό το χαρακτηριστικό δεν υποστηρίζεται σε κινητές συσκευές και δεν λειτουργεί καλά χρησιμοποιώντας δυναμικό κείμενο.

Ευτυχώς, υπάρχει Mark.js, ένα δωρεάν plugin για το JavaScript που προσθέτει ένα επισημάνετε τη λειτουργία αναζήτησης σε οποιαδήποτε σελίδα με ευκολία.

Από προεπιλογή, λειτουργεί ως a vanilla JS plugin αλλά μπορεί επίσης να τρέξει πάνω από το jQuery. Είναι ένα έργο εντελώς ανοιχτού κώδικα, επομένως μπορείτε να το χρησιμοποιήσετε σε οποιονδήποτε εμπορικό ή άλλον ιστότοπο.

Λειτουργεί σαν οποιαδήποτε λειτουργία αναζήτησης στο πρόγραμμα περιήγησης, εκτός από τα επιπλέον καλούδια. Μπορείς να προσθέσεις τα προσαρμοσμένα φίλτρα σας και αναζητήστε λέξεις με βάση κανονικές εκφράσεις, συγκεκριμένα συνώνυμα, και ακόμη και στο δυναμικά στοιχεία σελίδας όπως τα iframes.

Για να ξεκινήσετε, απλώς κατεβάστε το αρχείο Mark.js από το GitHub ή να φιλοξενήσει το αρχείο μέσω ενός CDN για εξοικονόμηση χρόνου.

Θα πρέπει να εκτελέσετε αυτήν τη λειτουργία συνδεδεμένο σε ένα πεδίο εισαγωγής στη σελίδα. Με αυτόν τον τρόπο οι χρήστες μπορούν να εισάγουν όρους αναζήτησης και λάβετε άμεση ανατροφοδότηση μέσω επισημασμένου κειμένου.

Εδώ είναι α δείγμα δείγματος από τη σελίδα επίδειξης:

 $ (".context"). Σημείωση (λέξη-κλειδί [, επιλογές]). 

ο .συμφραζόμενα όπου θα έπρεπε να λειτουργήσει η λειτουργία αναζήτηση όρων. Μπορείτε να χρησιμοποιήσετε το προεπιλεγμένο HTML στοιχείο εάν προσπαθείτε να κάνετε αναζήτηση σε ολόκληρη τη σελίδα ή θα μπορούσατε να περάσετε πολλαπλά στοιχεία όπως διαφορετικά γραφικά στοιχεία widget ή iframes.

Στη συνέχεια, μέσα στο σημάδι() λειτουργούν εσείς περάστε τη λέξη-κλειδί, μαζί με τις επιλογές (αν το επιθυμείτε).

Εάν επιτρέπετε στους χρήστες να πληκτρολογήσουν μια λέξη-κλειδί τότε μπορείτε αυτόματη ενημέρωση της λειτουργίας με μια νέα λέξη-κλειδί μετά από κάθε πίεση. Υπάρχει ακόμη και μια συγκεκριμένη λειτουργία για να στοχεύσετε αυτό το συμβάν.

Mark.js συνεργάζεται με όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένων των Chrome, του Firefox, του Opera (v12 +) και του Internet Explorer (9+). Είναι πραγματικά εύκολο να ρυθμίσετε εάν ακολουθείτε τα έγγραφα και χρησιμοποιείτε τα νεότερα αρχεία.

Αλλά, αν θέλετε να δείτε Mark.js σε δράση ρίξτε μια ματιά στο παρακάτω βιολί χρησιμοποιώντας ένα πολύ βασικό demo του jQuery για να αναζητήσετε μερικές παραγράφους του Lorem Ipsum.