Η δημιουργία της δικής σας γραμμής αναζήτησης αυτόματης συμπλήρωσης είναι ευκολότερη από όσο νομίζετε.
Η γραμμή αναζήτησης είναι ένα δημοφιλές στοιχείο διεπαφής χρήστη που χρησιμοποιούν πολλοί σύγχρονοι ιστότοποι. Εάν δημιουργείτε έναν ιστότοπο που περιέχει οποιονδήποτε τύπο δεδομένων, ίσως θέλετε οι χρήστες σας να μπορούν να αναζητούν συγκεκριμένα στοιχεία.
Υπάρχουν πολλοί τρόποι με τους οποίους μπορείτε να δημιουργήσετε μια γραμμή αναζήτησης. Μπορείτε να δημιουργήσετε σύνθετες γραμμές αναζήτησης που επιστρέφουν αποτελέσματα με βάση πολλά φίλτρα, όπως όνομα ή ημερομηνία. Οι υπάρχουσες βιβλιοθήκες μπορούν να σας βοηθήσουν να εφαρμόσετε μια γραμμή αναζήτησης χωρίς να την δημιουργήσετε από την αρχή.
Ωστόσο, μπορείτε επίσης να δημιουργήσετε μια απλή γραμμή αναζήτησης χρησιμοποιώντας JavaScript vanilla, η οποία συγκρίνει την είσοδο ενός χρήστη με μια λίστα συμβολοσειρών.
Πώς να προσθέσετε τη διεπαφή χρήστη για τη γραμμή αναζήτησης
Ο ιστότοπός σας θα πρέπει να περιλαμβάνει ένα πλαίσιο εισαγωγής ώστε οι χρήστες σας να εισάγουν το κείμενο που θέλουν να αναζητήσουν. Ένας τρόπος για να το κάνετε αυτό είναι να χρησιμοποιήσετε μια ετικέτα εισαγωγής και να το διαμορφώσετε ώστε να μοιάζει με γραμμή αναζήτησης.
- Δημιουργήστε έναν φάκελο για να αποθηκεύσετε τον ιστότοπό σας. Μέσα στο φάκελο, δημιουργήστε ένα αρχείο HTML με το όνομα index.html.
- Συμπληρώστε το αρχείο σας με τη βασική δομή ενός εγγράφου HTML. Εάν δεν είστε εξοικειωμένοι με την HTML, υπάρχουν πολλά Παραδείγματα κώδικα HTML που μπορείτε να μάθετε για να σε βοηθήσουν να ανέβεις ταχύτητα.
<!doctype html>
<html lang="en-ΗΠΑ">
<κεφάλι>
<τίτλος>Μπαρα αναζήτησης</title>
</head>
<σώμα>
<div class="δοχείο">
<!-- Το περιεχόμενο της ιστοσελίδας πηγαίνει εδώ-->
</div>
</body>
</html> - Μέσα στην κατηγορία κοντέινερ div, προσθέστε μια ετικέτα εισαγωγής. Αυτό θα επιτρέψει στον χρήστη να πληκτρολογήσει το κείμενο που θα ήθελε να αναζητήσει. Κάθε φορά που εισάγουν έναν νέο χαρακτήρα, ο ιστότοπός σας θα καλεί τη συνάρτηση αναζήτησης(). Θα δημιουργήσετε αυτή τη λειτουργία σε επόμενα βήματα.
Το χαρακτηριστικό αυτόματης συμπλήρωσης διασφαλίζει ότι ένα πρόγραμμα περιήγησης δεν θα προσθέσει το δικό του αναπτυσσόμενο μενού βάσει προηγούμενων όρων αναζήτησης.<div class="δοχείο">
<h2>Αναζήτηση χωρών</h2>
<id εισόδου="μπαρα αναζήτησης" αυτόματη συμπλήρωση="μακριά από" onkeyup="Αναζήτηση()" τύπος="κείμενο"
όνομα="Αναζήτηση" placeholder="Τι ψάχνεις?">
</div> - Στον ίδιο φάκελο με το δικό σας index.html αρχείο, δημιουργήστε ένα νέο αρχείο CSS που ονομάζεται στυλ.css.
- Συμπληρώστε το αρχείο με στυλ για τη συνολική ιστοσελίδα και τη γραμμή αναζήτησης:
σώμα {
περιθώριο: 0;
γέμιση: 0;
χρώμα του φόντου: #f7f7f7;
}
* {
γραμματοσειρά-οικογένεια: "Arial", Σανς σέριφ;
}
.δοχείο {
padding: 100px 25%;
οθόνη: flex;
flex-direction: στήλη;
Ύψος γραμμής: 2 εκ.
μέγεθος γραμματοσειράς: 1.2em;
χρώμα: #202C39;
}
#μπαρα αναζήτησης {
padding: 15px;
περίγραμμα-ακτίνα: 5px;
}
εισαγωγή[τύπος=κείμενο] {
-webkit-μετάβαση: πλάτος 0.15 δευτευκολία εισόδου;
μετάβαση: πλάτος 0.15 δευτευκολία εισόδου;
} - Σε index.html, προσθέστε έναν σύνδεσμο στο αρχείο CSS μέσα στην ετικέτα head και κάτω από την ετικέτα τίτλου:
<σύνδεσμος rel="φύλλο στυλ" href="στυλ.css"> - Ανοιξε το index.html αρχείο σε ένα πρόγραμμα περιήγησης ιστού και προβάλετε τη διεπαφή χρήστη της γραμμής αναζήτησής σας.
Πώς να δημιουργήσετε τις συμβολοσειρές λίστας για τη γραμμή αναζήτησης
Για να μπορέσει ο χρήστης να πραγματοποιήσει αναζήτηση, θα χρειαστεί να δημιουργήσετε μια λίστα με τα διαθέσιμα στοιχεία που μπορεί να αναζητήσει. Μπορείτε να το κάνετε αυτό με μια σειρά από συμβολοσειρές. Μια χορδή είναι ένα από τα πολλά τύπους δεδομένων που μπορείτε να χρησιμοποιήσετε σε JavaScript, και μπορεί να αντιπροσωπεύει μια ακολουθία χαρακτήρων.
Μπορείτε να δημιουργήσετε δυναμικά αυτήν τη λίστα χρησιμοποιώντας JavaScript, καθώς η σελίδα φορτώνεται.
- Μέσα index.html, κάτω από την ετικέτα εισαγωγής, προσθέστε ένα div. Αυτό το div θα εμφανίσει ένα αναπτυσσόμενο μενού που θα περιέχει μια λίστα με στοιχεία που ταιριάζουν με αυτό που αναζητά ο χρήστης:
<div id="λίστα"></div> - Στον ίδιο φάκελο με το δικό σας index.html αρχείο και στυλ.css αρχείο, δημιουργήστε ένα νέο αρχείο που ονομάζεται script.js.
- Μέσα script.js, δημιουργήστε μια νέα συνάρτηση που ονομάζεται loadSearchData(). Μέσα στη συνάρτηση, αρχικοποιήστε έναν πίνακα με μια λίστα συμβολοσειρών. Λάβετε υπόψη ότι αυτή είναι μια μικρή στατική λίστα. Μια πιο σύνθετη υλοποίηση θα πρέπει να λαμβάνει υπόψη την αναζήτηση σε μεγαλύτερα σύνολα δεδομένων.
λειτουργίαloadSearchData() {
// Δεδομένα που θα χρησιμοποιηθούν στη γραμμή αναζήτησης
αφήνω χώρες = [
'Αυστραλία',
'Αυστρία',
'Βραζιλία',
'Καναδάς',
'Δανία',
'Αίγυπτος',
'Γαλλία',
'Γερμανία',
'ΗΠΑ',
'Βιετνάμ'
];
} - Μέσα στη loadSearchData() και κάτω από τον νέο πίνακα, λάβετε το στοιχείο div που θα εμφανίζει τα αντικείμενα αναζήτησης που ταιριάζουν στον χρήστη. Μέσα στη λίστα div, προσθέστε μια ετικέτα αγκύρωσης για κάθε στοιχείο δεδομένων στη λίστα:
// Λάβετε το στοιχείο HTML της λίστας
αφήνω λίστα = έγγραφο.getElementById('list');
// Προσθήκη κάθε στοιχείου δεδομένων ως ετικέτα
χώρες.για κάθε((χώρα)=>{
αφήνω α = έγγραφο.createElement("a");
a.innerText = χώρα;
a.classList.add("στοιχείο λίστας");
λίστα.appendChild (a);
}) - Στην ετικέτα σώματος του index.html, προσθέστε το χαρακτηριστικό συμβάντος onload για να καλέσετε τη νέα συνάρτηση loadSearchData(). Αυτό θα φορτώσει τα δεδομένα καθώς φορτώνεται η σελίδα.
<φορτίο σώματος="loadSearchData()"> - Σε index.html, πριν τελειώσει η ετικέτα body, προσθέστε μια ετικέτα σεναρίου για σύνδεση στο αρχείο JavaScript:
<φορτίο σώματος="loadSearchData()">
<!-- Το περιεχόμενο της ιστοσελίδας σας -->
<σενάριο src="script.js"></script>
</body> - Σε στυλ.css, προσθέστε κάποιο στυλ στην αναπτυσσόμενη λίστα:
#λίστα {
περίγραμμα: 1 εικονοστοιχείο συμπαγές ανοιχτό γκρι.
περίγραμμα-ακτίνα: 5px;
οθόνη: μπλοκ;
}
.listItem {
οθόνη: flex;
flex-direction: στήλη;
κείμενο-διακόσμηση: κανένα;
padding: 5px 20px;
χρωμα μαυρο;
}
.listItem:φτερουγίζω {
Χρώμα φόντου: ανοιχτό γκρι;
} - Ανοιξε index.html σε ένα πρόγραμμα περιήγησης ιστού για να δείτε τη γραμμή αναζήτησής σας και τη λίστα με τα διαθέσιμα αποτελέσματα αναζήτησης. Η λειτουργία αναζήτησης δεν λειτουργεί ακόμα, αλλά θα πρέπει να δείτε τη διεπαφή χρήστη που θα χρησιμοποιεί:
Πώς να δημιουργήσετε το αναπτυσσόμενο μενού με τα αντίστοιχα αποτελέσματα στη γραμμή αναζήτησης
Τώρα που έχετε μια γραμμή αναζήτησης και μια λίστα με συμβολοσειρές για αναζήτηση από τους χρήστες, μπορείτε να προσθέσετε τη λειτουργία αναζήτησης. Καθώς ο χρήστης πληκτρολογεί στη γραμμή αναζήτησης, θα εμφανίζονται μόνο ορισμένα στοιχεία στη λίστα.
- Σε στυλ.css, αντικαταστήστε το στυλ της λίστας για να αποκρύψετε τη λίστα από προεπιλογή:
#λίστα {
περίγραμμα: 1 εικονοστοιχείο συμπαγές ανοιχτό γκρι.
περίγραμμα-ακτίνα: 5px;
οθόνη: καμία;
} - Σε script.js, δημιουργήστε μια νέα συνάρτηση που ονομάζεται αναζήτηση(). Λάβετε υπόψη ότι το πρόγραμμα θα καλεί αυτήν τη λειτουργία κάθε φορά που ο χρήστης εισάγει ή αφαιρεί έναν χαρακτήρα από τη γραμμή αναζήτησης. Ορισμένες εφαρμογές θα χρειαστούν ταξίδια σε διακομιστή για να ανακτήσουν πληροφορίες. Σε τέτοιες περιπτώσεις, αυτή η υλοποίηση θα μπορούσε να επιβραδύνει τη διεπαφή χρήστη σας. Ίσως χρειαστεί να τροποποιήσετε την υλοποίηση για να το λάβετε υπόψη.
λειτουργίαΑναζήτηση() {
// Η λειτουργία αναζήτησης πηγαίνει εδώ
} - Μέσα στη συνάρτηση search(), λάβετε το στοιχείο div HTML για τη λίστα. Επίσης, λάβετε τα στοιχεία της ετικέτας αγκύρωσης HTML για κάθε στοιχείο μέσα στη λίστα:
αφήνω listContainer = έγγραφο.getElementById('list');
αφήνω listItems = έγγραφο.getElementsByClassName('listItem'); - Λάβετε τα δεδομένα που εισήγαγε ο χρήστης στη γραμμή αναζήτησης:
αφήνω είσοδος = έγγραφο.getElementById('γραμμή αναζήτησης').τιμή
input = input.toLowerCase(); - Συγκρίνετε τα στοιχεία του χρήστη με κάθε στοιχείο στη λίστα. Για παράδειγμα, εάν ο χρήστης πληκτρολογήσει "a", η συνάρτηση θα συγκρίνει εάν το "a" βρίσκεται μέσα στο "Australia", μετά "Austria", "Brazil", "Canada" και ούτω καθεξής. Εάν ταιριάζει, θα εμφανίσει αυτό το στοιχείο στη λίστα. Εάν δεν ταιριάζει, θα κρύψει αυτό το στοιχείο.
αφήνω χωρίς Αποτελέσματα = αληθής;
για (i = 0; Εγώ < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="κανένας";
να συνεχίσει;
}
αλλού {
listItems[i].style.display="καλώδιο";
χωρίς Αποτελέσματα = ψευδής;
}
} - Εάν δεν υπάρχουν καθόλου αποτελέσματα στη λίστα, αποκρύψτε τη λίστα εντελώς:
listContainer.style.display = δεν υπάρχουν αποτελέσματα; "κανένας": "ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ"; - Κάνε κλικ στο index.html αρχείο για να το ανοίξετε σε ένα πρόγραμμα περιήγησης ιστού.
- Ξεκινήστε να πληκτρολογείτε στη γραμμή αναζήτησης. Καθώς πληκτρολογείτε, η λίστα των αποτελεσμάτων θα ενημερώνεται για να εμφανίζει μόνο τα αντίστοιχα αποτελέσματα.
Χρήση γραμμής αναζήτησης για αναζήτηση αποτελεσμάτων που ταιριάζουν
Τώρα που ξέρετε πώς να δημιουργήσετε μια γραμμή αναζήτησης με επιλογή συμβολοσειρών, μπορείτε να προσθέσετε περισσότερες λειτουργίες.
Για παράδειγμα, μπορείτε να προσθέσετε συνδέσμους στις ετικέτες αγκύρωσης για να ανοίξετε διαφορετικές σελίδες ανάλογα με το αποτέλεσμα στο οποίο κάνει κλικ ο χρήστης. Μπορείτε να αλλάξετε τη γραμμή αναζήτησής σας για αναζήτηση σε πιο σύνθετα αντικείμενα. Μπορείτε επίσης να τροποποιήσετε τον κώδικα ώστε να λειτουργεί με πλαίσια όπως το React.
