בניית סרגל חיפוש משלך של השלמה אוטומטית קלה מכפי שאתה חושב.
סרגל חיפוש הוא רכיב ממשק משתמש פופולרי שהרבה אתרים מודרניים משתמשים בו. אם אתה בונה אתר שמכיל כל סוג של נתונים, ייתכן שתרצה שהמשתמשים שלך יוכלו לחפש פריטים ספציפיים.
ישנן דרכים רבות לבנות סרגל חיפוש. אתה יכול ליצור סרגלי חיפוש מורכבים שמחזירים תוצאות על סמך מסננים מרובים, כגון שם או תאריך. ספריות קיימות יכולות לעזור לך ליישם סרגל חיפוש מבלי לבנות אותו מאפס.
עם זאת, אתה יכול גם ליצור סרגל חיפוש פשוט באמצעות וניל JavaScript, שמשווה קלט של משתמש מול רשימה של מחרוזות.
כיצד להוסיף את ממשק המשתמש לסרגל החיפוש
האתר שלך צריך לכלול תיבת קלט עבור המשתמשים שלך כדי להזין את הטקסט שהם רוצים לחפש. אחת הדרכים לעשות זאת היא להשתמש בתג קלט ולעצב אותו כך שייראה כמו שורת חיפוש.
- צור תיקיה לאחסון האתר שלך. בתוך התיקיה, צור קובץ HTML בשם index.html.
- מלא את הקובץ שלך במבנה הבסיסי של מסמך HTML. אם אתה לא מכיר HTML, יש הרבה
דוגמאות לקוד HTML שתוכל ללמוד כדי לעזור לך להתעדכן.
<!doctype html>
<html lang="en-US">
<רֹאשׁ>
<כותרת>שורת החיפוש</title>
</head>
<גוּף>
<div class="מְכוֹלָה">
<!-- תוכן דף האינטרנט נכנס לכאן-->
</div>
</body>
</html> - בתוך ה-contain class div, הוסף תג קלט. זה יאפשר למשתמש להקליד את הטקסט שהוא רוצה לחפש. בכל פעם שהם מזינים תו חדש, האתר שלך יקרא לפונקציית החיפוש(). אתה תיצור פונקציה זו בשלבים מאוחרים יותר.
תכונת ההשלמה האוטומטית מבטיחה שדפדפן לא יוסיף תפריט נפתח משלו בהתבסס על מונחי חיפוש קודמים.<div class="מְכוֹלָה">
<h2>חפש מדינות</h2>
<מזהה קלט="שורת החיפוש" השלמה אוטומטית="כבוי" onkeyup="לחפש()" סוג="טֶקסט"
שם="לחפש" מציין מיקום="מה אתה מחפש?">
</div> - באותה תיקייה כמו שלך index.html קובץ, צור קובץ CSS חדש בשם styles.css.
- מלא את הקובץ עם סגנון עבור דף האינטרנט הכולל וסרגל החיפוש:
גוף {
שוליים: 0;
ריפוד: 0;
צבע רקע: #f7f7f7;
}
* {
משפחת גופן: "אריאל", פונט סאנס סריף;
}
.מְכוֹלָה {
ריפוד: 100px 25%;
תצוגה: flex;
flex-direction: עמודה;
גובה קו: 2rem;
גודל גופן: 1.2em;
צֶבַע: #202C39;
}
סרגל החיפוש {
ריפוד: 15px;
border-radius: 5px;
}
קֶלֶט[type=text] {
-webkit-transition: רוֹחַב 0.15 שניותקלות-in-out;
מַעֲבָר: רוֹחַב 0.15 שניותקלות-in-out;
} - ב index.html, הוסף קישור לקובץ ה-CSS שלך בתוך תג head ומתחת לתג הכותרת:
<קישור rel="גיליון סגנונות" href="styles.css"> - פתח את ה index.html קובץ בדפדפן אינטרנט, והצג את ממשק המשתמש של סרגל החיפוש שלך.
כיצד ליצור את מחרוזות הרשימה עבור סרגל החיפוש
לפני שהמשתמש יוכל לחפש, תצטרך ליצור רשימה של פריטים זמינים שהוא יכול לחפש. אתה יכול לעשות זאת עם מערך של מחרוזות. מחרוזת היא אחת מיני רבות סוגי נתונים שבהם אתה יכול להשתמש ב-JavaScript, ויכול לייצג רצף של תווים.
אתה יכול ליצור רשימה זו באופן דינמי באמצעות JavaScript, כאשר הדף נטען.
- בְּתוֹך index.html, מתחת לתג הקלט, הוסף div. div זה יציג תפריט נפתח שיכיל רשימה של פריטים התואמים למה שהמשתמש מחפש:
<div id="רשימה"></div> - באותה תיקייה כמו שלך index.html קובץ ו styles.css קובץ, צור קובץ חדש בשם script.js.
- בְּתוֹך script.js, צור פונקציה חדשה בשם loadSearchData(). בתוך הפונקציה, אתחול מערך עם רשימה של מחרוזות. זכור שזו רשימה סטטית קטנה. יישום מורכב יותר יצטרך לקחת בחשבון חיפוש באמצעות מערכי נתונים גדולים יותר.
פוּנקצִיָהטעןSearchData() {
// נתונים לשימוש בסרגל החיפוש
לתת מדינות = [
'אוֹסטְרַלִיָה',
'אוֹסְטְרֵיָה',
'בְּרָזִיל',
'קנדה',
'דנמרק',
'מִצְרַיִם',
'צָרְפַת',
'גֶרמָנִיָה',
'ארה"ב',
'וייטנאם'
];
} - בתוך loadSearchData() ומתחת למערך החדש, קבל את האלמנט div שיציג את פריטי החיפוש התואמים למשתמש. בתוך div הרשימה, הוסף תג עוגן עבור כל פריט נתונים ברשימה:
// קבל את רכיב ה-HTML של הרשימה
לתת רשימה = מסמך.getElementById('list');
// הוסף כל פריט נתונים בתור an תָג
מדינות.לכל אחד((מדינה)=>{
לתת א = מסמך.createElement("a");
a.innerText = מדינה;
a.classList.add("listItem");
רשימה.appendChild (א);
}) - בתג הגוף של index.html, הוסף את התכונה onload event כדי לקרוא לפונקציה החדשה loadSearchData(). זה יטען את הנתונים בזמן שהדף נטען.
<עומס הגוף="loadSearchData()"> - ב index.html, לפני שתג הגוף מסתיים, הוסף תג סקריפט כדי לקשר לקובץ ה-JavaScript שלך:
<עומס הגוף="loadSearchData()">
<!-- תוכן דף האינטרנט שלך -->
<script src="script.js"></script>
</body> - ב styles.css, הוסף קצת סגנון לרשימה הנפתחת:
#רשימה {
גבול: 1px אפור בהיר מלא;
border-radius: 5px;
בלוק תצוגה;
}
.listItem {
תצוגה: flex;
flex-direction: עמודה;
קישוט טקסט: אין;
ריפוד: 5px 20px;
צבע שחור;
}
.listItem:לְרַחֵף {
צבע רקע: אפור בהיר;
} - לִפְתוֹחַ index.html בדפדפן אינטרנט כדי להציג את סרגל החיפוש שלך ואת רשימת תוצאות החיפוש הזמינות. פונקציונליות החיפוש עדיין לא עובדת, אבל אתה אמור לראות את ממשק המשתמש שבו היא תשתמש:
כיצד ליצור את התפריט הנפתח עם תוצאות תואמות בסרגל החיפוש
כעת, לאחר שיש לך סרגל חיפוש ורשימת מחרוזות שמשתמשים יוכלו לחפש בהן, אתה יכול להוסיף את פונקציונליות החיפוש. כשהמשתמש מקליד בסרגל החיפוש, רק פריטים מסוימים ברשימה יוצגו.
- ב styles.css, החלף את הסגנון של הרשימה כדי להסתיר את הרשימה כברירת מחדל:
#רשימה {
גבול: 1px אפור בהיר מלא;
border-radius: 5px;
אל תציג דבר;
} - ב script.js, צור פונקציה חדשה בשם search(). זכור שהתוכנה תקרא לפונקציה הזו בכל פעם שהמשתמש מזין או מסיר תו מסרגל החיפוש. יישומים מסוימים יצטרכו נסיעות לשרת כדי להביא מידע. במקרים כאלה, יישום זה עלול להאט את ממשק המשתמש שלך. ייתכן שיהיה עליך לשנות את היישום כדי לקחת זאת בחשבון.
פוּנקצִיָהלחפש() {
// פונקציונליות החיפוש נכנסת לכאן
} - בתוך הפונקציה search() קבל את רכיב HTML div עבור הרשימה. קבל גם את רכיבי תג עוגן HTML של כל פריט ברשימה:
לתת listContainer = מסמך.getElementById('list');
לתת listItems = מסמך.getElementsByClassName('listItem'); - קבל את הקלט שהמשתמש הזין בסרגל החיפוש:
לתת קלט = מסמך.getElementById('searchbar').value
input = input.toLowerCase(); - השווה את הקלט של המשתמש לכל פריט ברשימה. לדוגמה, אם המשתמש יזין "a", הפונקציה תשווה אם "a" נמצא בתוך "אוסטרליה", ואז "אוסטריה", "ברזיל", "קנדה" וכן הלאה. אם זה תואם, זה יציג את הפריט הזה ברשימה. אם זה לא תואם, זה יסתיר את הפריט הזה.
לתת noResults = נָכוֹן;
עבור (i = 0; אני < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || קלט "") {
listItems[i].style.display="אף אחד";
לְהַמשִׁיך;
}
אַחֵר {
listItems[i].style.display="לְהַגמִישׁ";
noResults = שֶׁקֶר;
}
} - אם אין תוצאות כלל ברשימה, הסתר את הרשימה לחלוטין:
listContainer.style.display = noResults? "אף אחד": "לַחסוֹם"; - הקלק על ה index.html קובץ כדי לפתוח אותו בדפדפן אינטרנט.
- התחל להקליד בסרגל החיפוש. תוך כדי הקלדה, רשימת התוצאות תתעדכן כך שתציג רק תוצאות תואמות.
שימוש בסרגל חיפוש לחיפוש תוצאות תואמות
עכשיו שאתה יודע איך ליצור סרגל חיפוש עם בחירת מחרוזת, אתה יכול להוסיף פונקציונליות נוספת.
לדוגמה, אתה יכול להוסיף קישורים לתגי העוגן שלך כדי לפתוח דפים שונים בהתאם לתוצאה שהמשתמש לוחץ עליה. אתה יכול לשנות את סרגל החיפוש שלך כדי לחפש אובייקטים מורכבים יותר. אתה יכול גם לשנות את הקוד כך שיעבוד עם מסגרות כמו React.
