סרגלי חיפוש הם דרך מצוינת לעזור למשתמשים למצוא את מה שהם צריכים באתר שלך. הם גם טובים לניתוח אם אתה עוקב אחר מה שהמבקרים שלך מחפשים.

אתה יכול להשתמש ב-React כדי לבנות סרגל חיפוש שמסנן ומציג נתונים כשהמשתמש מקליד. עם React hooks ושיטות מפת ומערך הסינון של JavaScript, התוצאה הסופית היא תיבת חיפוש רספונסיבית ופונקציונלית.

יצירת סרגל החיפוש

החיפוש ייקח קלט ממשתמש ויפעיל את פונקציית הסינון. אתה יכול השתמש בספרייה כמו פורמיק כדי ליצור טפסים ב-React, אבל אתה יכול גם ליצור סרגל חיפוש מאפס.

אם אין לך פרויקט React ואתה רוצה לעקוב אחריו, צור אחד באמצעות הפקודה create-react-app.

npx לִיצוֹר-react-app לחפש-בַּר

בתוך ה App.js קובץ, הוסף את רכיב הטופס, כולל תג הקלט:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
<div>
<טופס>
<סוג קלט="לחפש"/>
</form>
</div>
 )
}

כדאי להשתמש ב- useStateוו תגובה וה בשינוי אירוע כדי לשלוט בקלט. אז, ייבא את useState ושנה את הקלט כדי להשתמש בערך המצב:

יְבוּא { useState } מ "לְהָגִיב"
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
 const [שאילתה, setquery] = useState('')
const handleChange = (e) => {





instagram viewer



setquery(ה.יַעַד.ערך)
 }
לַחֲזוֹר (
<div>
<טופס>
<סוג קלט="לחפש" value={query} onChange={handleChange}/>
</form>
</div>
 )
 }

בכל פעם שמשתמש מקליד משהו בתוך אלמנט הקלט, handleChange מעדכן את המדינה.

סינון הנתונים על שינוי קלט

סרגל החיפוש אמור להפעיל חיפוש באמצעות השאילתה שהמשתמש מספק. זה אומר שעליך לסנן את הנתונים בתוך הפונקציה handleChange. כדאי גם לעקוב אחר הנתונים המסוננים במדינה.

ראשית, שנה את המצב כך שיכלול את הנתונים:

const [state, setstate] = useState({
 שאילתא: '',
רשימה: []
})

אגד את ערכי המצב כך, במקום ליצור אחד עבור כל ערך, מקצץ את מספר העיבודים, ומשפר את הביצועים.

הנתונים שאתה מסנן יכולים להיות כל דבר שתרצה לבצע עליו חיפוש. לדוגמה, אתה יכול ליצור רשימה של פוסטים לדוגמה בבלוג כמו זה:

const פוסטים = [
 { 
 כתובת אתר: '',
 תגיות: ['לְהָגִיב', 'בלוג'],
 כותרת: 'איך לִיצוֹר תגובה לחפש בַּר',
 },
 {
 כתובת אתר:'',
 תגיות: ['צוֹמֶת','אֶקְסְפּרֶס'],
 כותרת: 'כיצד ללעוג לנתוני API ב-Node',
 },
// נתונים נוספים כאן
 ]

אתה יכול גם להביא את הנתונים באמצעות API מ-CDN או מסד נתונים.

לאחר מכן, שנה את הפונקציה handleChange() כדי לסנן את הנתונים בכל פעם שהמשתמש מקליד בתוך הקלט.

const handleChange = (e) => {
const results = posts.filter (פוסט => {
 if (e.target.value "") הודעות חוזרות
לַחֲזוֹרהודעה.כותרת.toLowerCase().כולל(ה.יַעַד.ערך.toLowerCase())
 })
 setstate({
שאילתא: ה.יַעַד.ערך,
רשימה: תוצאות
 })
}

הפונקציה מחזירה את הפוסטים מבלי לחפש בהם אם השאילתה ריקה. אם משתמש הקליד שאילתה, הוא בודק אם כותרת הפוסט כוללת את טקסט השאילתה. המרת כותרת הפוסט והשאילתה לאותיות קטנות מבטיחה שההשוואה אינה תלוית רישיות.

ברגע ששיטת הסינון מחזירה את התוצאות, הפונקציה handleChange מעדכנת את המצב עם טקסט השאילתה והנתונים המסוננים.

הצגת תוצאות החיפוש

הצגת תוצאות החיפוש כרוכה בלולאה על מערך הרשימה באמצעות ה- מַפָּה שיטה והצגת הנתונים עבור כל פריט.

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
// פונקציית state ו-handleChange()
לַחֲזוֹר (
<div>
<טופס>
<input onChange={handleChange} value={state.query} type="לחפש"/>
</form>
<ul>
 {(state.query ''? "": state.list.map (פוסט => {
 לַחֲזוֹר <li key={post.title}>{post.title}</li>
 }))}
</ul>
</div>
 )
}

בתוך תג ul, הרכיב בודק אם השאילתה ריקה. אם כן, הוא מציג מחרוזת ריקה כי זה אומר שהמשתמש לא חיפש שום דבר. אם אתה רוצה לחפש ברשימת פריטים שאתה כבר מציג, הסר את הסימון הזה.

אם השאילתה אינה ריקה, שיטת המפה חוזרת על תוצאות החיפוש ומפרטת את כותרות הפוסטים.

אתה יכול גם להוסיף סימון שמציג הודעה מועילה אם החיפוש לא מחזיר תוצאות.

<ul>
 {(state.query ''? "אין פוסטים שתואמים לשאילתה": !state.list.length? "השאילתה שלך לא הניבה תוצאות": state.list.map (פוסט => {
 לַחֲזוֹר <li key={post.title}>{post.title}</li>
 }))}
</ul>

הוספת הודעה זו משפרת את חווית המשתמש מכיוון שהמשתמש לא נשאר מסתכל על שטח ריק.

טיפול בפרמטר חיפוש יותר מפעם אחת

אתה יכול להשתמש במצב React וב-hooks, יחד עם אירועי JavaScript, כדי ליצור רכיב חיפוש מותאם אישית שמסנן מערך נתונים.

פונקציית הסינון בודקת רק אם השאילתה תואמת תכונה אחת - כותרת - באובייקטים בתוך המערך. אתה יכול לשפר את פונקציונליות החיפוש על ידי שימוש באופרטור OR לוגי כדי להתאים את השאילתה למאפיינים אחרים באובייקט.