Μάθετε πώς να δημιουργείτε μια επεκτεινόμενη γραμμή αναζήτησης χρησιμοποιώντας απλό HTML, CSS και JavaScript.

Τα διαδραστικά στοιχεία GUI κάνουν την εφαρμογή σας πιο εύκολη στη χρήση. Το HTML περιλαμβάνει πολλά στοιχεία φόρμας από προεπιλογή, αλλά θα θέλετε να χρησιμοποιήσετε CSS ώστε να ταιριάζουν στο σχέδιό σας. Μπορείτε επίσης να χρησιμοποιήσετε JavaScript για να επεκτείνετε ή να τροποποιήσετε τη συμπεριφορά τους.

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

Μάθετε πώς μπορείτε να δημιουργήσετε μια κρυφή γραμμή αναζήτησης χρησιμοποιώντας HTML, CSS και JavaScript.

Δημιουργήστε τη δομή περιεχομένου με HTML

Εδώ είναι ο κώδικας HTML για τη δυνατότητα. Θα έχετε ένα γονικό στοιχείο που περιέχει μια είσοδο και ένα στοιχείο κουμπιού. Θα εισαγάγετε επίσης σενάρια με εκπληκτικές γραμματοσειρές για το εικονίδιο αναζήτησης. Σε αυτήν την περίπτωση, θα χρησιμοποιήσετε το εικονίδιο αναζήτησης με μεγεθυντικό φακό.

instagram viewer 
html>
<htmllang="en">
<κεφάλι>
<μετασύνολο χαρακτήρων="UTF-8" />
<μεταhttp-equiv="Χ-UA-Συμβατό"περιεχόμενο="IE=άκρη" />
<μεταόνομα="Θύρα προβολής"περιεχόμενο="width=device-width, αρχική κλίμακα=1.0" />
<γραφήsrc=" https://kit.fontawesome.com/d69fb28507.js"διασταυρούμενης καταγωγής="Ανώνυμος">γραφή>
<τίτλος>Κρυφή γραμμή αναζήτησηςτίτλος>
κεφάλι>


<σώμα>
<divτάξη="μητρική εταιρεία">
<εισαγωγήτάξη="εισαγωγή"τύπος="τύπος"κράτησης θέσης="Αναζήτηση..." />


<κουμπίτάξη="btn">
<Εγώτάξη="fa-solid fa-μεγεθυντικός φακός">Εγώ>
κουμπί>
div>
σώμα>
html>

Δώστε στυλ στη διεπαφή χρησιμοποιώντας CSS

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

Θα ευθυγραμμίσετε επίσης και τα δύο στοιχεία στο κέντρο για καλύτερη ορατότητα. Αλλά στην εφαρμογή σας, μπορείτε να επιλέξετε να έχετε τη γραμμή αναζήτησης όποτε θέλετε. Επίσης, δώστε και στα δύο στοιχεία το ίδιο πλάτος, ώστε να φαίνονται το ίδιο μέγεθος και όχι το ένα μεγαλύτερο από το άλλο.

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

* {
περιθώριο: 0;
υλικό παραγεμίσματος: 0;
μέγεθος κουτιού: περίγραμμα-κουτί;
}
σώμα {
χρώμα του φόντου: #d9d9d9;
ύψος: 100vh;
απεικόνιση: καλώδιο;
στοίχιση-στοιχεία: κέντρο;
δικαιολογώ-περιεχόμενο: κέντρο;
}


.μητρική εταιρεία {
θέση: συγγενής;
}


.εισαγωγή {
περίγραμμα: κανένας;
σύνορο: κανένας;
σύνορα-ακτίνα: 100px;
υλικό παραγεμίσματος: 5px 10px;
πλάτος: 40px;
μετάβαση: πλάτος 0.3sευκολία;
}


.εισαγωγή:: placeholder {
χρώμα: πράσινος;
}


.μητρική εταιρεία.ενεργός.εισαγωγή {
πλάτος: 200px;
}


.btn {
πλάτος: 40px;
υλικό παραγεμίσματος: 5px 10px;
δρομέας: δείκτης;
σύνορα-ακτίνα: 100px;
σύνορο: κανένας;
Ιστορικό: πράσινος;
απεικόνιση: στη γραμμή;
κουτί-σκιά: 0 0 5pxrgba(0, 0, 0, 0.2);
θέση: απόλυτος;
μπλουζα: 0;
αριστερά: 0;
μετάβαση: μεταμορφώνω 0.3sευκολία;
}


.μητρική εταιρεία.ενεργός.btn {
μεταμορφώνω: μετάφρασηΧ(210px);
}
.φα-στερεό {
χρώμα: #φφφφφ;
}

Θα πρέπει να έχετε ένα κουμπί αναζήτησης που μοιάζει με αυτό:

Προσθήκη λειτουργικότητας JavaScript

Στη συνέχεια, γράψτε κώδικα JavaScript για τα στοιχεία. Αρχικά, επιλέξτε τα στοιχεία γονέα, εισαγωγής και κουμπιού χρησιμοποιώντας το JavaScript querySelector() μέθοδος.

Στη συνέχεια, προσθέστε ένα πρόγραμμα ακρόασης συμβάντων κλικ στο κουμπί. Έτσι, όταν κάνετε κλικ, το κουμπί αλλάζει ανάλογα με την επιλεγμένη κλάση. Πρόσθεσε το Συγκεντρώνω() μέθοδος για να ρυθμίσετε την εστίαση στο καθορισμένο στοιχείο. Αρχίζει να αναβοσβήνει κάθε φορά που επεκτείνεται η γραμμή αναζήτησης.

αφήνω είσοδος = έγγραφο.querySelector(".εισαγωγή");
αφήνω btn = έγγραφο.querySelector(".btn");
αφήνω γονέας = έγγραφο.querySelector(".μητρική εταιρεία");
btn.addEventListener("Κάντε κλικ", () => {
 parent.classList.toggle("ενεργός");
 input.focus();
});

Εάν κάνετε κλικ στο κουμπί, ανοίγει η γραμμή αναζήτησης και αντίστροφα. Φαίνεται όπως φαίνεται στο παρακάτω διάγραμμα:

Τώρα, εάν πληκτρολογήσετε πληροφορίες και κάνετε κλικ στο κουμπί, κλείνει καθώς το σύστημα αναζητά τις πληροφορίες.

Cool, έτσι δεν είναι; Μπορείτε να δείτε αυτόν τον κωδικό και να παίξετε με τη γραμμή αναζήτησης ενεργοποιημένη codepen.io. Μπορείτε να προσαρμόσετε περαιτέρω τη γραμμή αναζήτησης δημιουργώντας ένα λίστα γραμμής αναζήτησης των ειδών. Αυτό διευκολύνει τους χρήστες σας να κάνουν αναζητήσεις στην εφαρμογή.

Άλλες δυνατότητες που μπορείτε να δημιουργήσετε

Ως αρχάριος στην ανάπτυξη ιστού, υπάρχουν πολλές δυνατότητες που μπορείτε να δημιουργήσετε με HTML, CSS και JavaScript. Μπορείτε να δημιουργήσετε ένα αναδυόμενο/τροπικό παράθυρο, ένα ρυθμιστικό εικόνας, ένα πρόγραμμα αυτόματης ενημέρωσης υποσέλιδου και πολλά άλλα.

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