כיצד לסנן תוצאות חיפוש בזמן הקלדה עם React

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

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

---

---

איפור של סרטון היום

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

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

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

npx create-react-app search-bar 

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

export default function App() { 
   return ( 
    <div> 
        <form> 
          <input type="search"/> 
        </form> 
    </div> 
  ) 
} 

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

import { useState } from "React" 
export default function App() { 
     const [query, setquery] = useState('') 
     const handleChange = (e) => { 
       setquery(e.target.value) 
     } 
     return ( 
      <div> 
          <form> 
            <input type="search" value={query} onChange={handleChange}/> 
          </form> 
      </div> 
    ) 
  } 

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

---

---

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

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

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

---

---

const [state, setstate] = useState({ 
  query: '', 
  list: [] 
}) 

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

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

כמה כסף אתה יכול להרוויח כריית ביטקוין

const posts = [ 
    {   
      url: '', 
      tags: ['react', 'blog'], 
      title: 'How to create a react search bar', 
    }, 
    { 
      url:'', 
      tags: ['node','express'], 
      title: 'How to mock api data in Node', 
    }, 
    // more data here 
  ] 

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

גרפיקה משולבת/מובנית

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

const handleChange = (e) => { 
    const results = posts.filter(post => { 
        if (e.target.value === "") return posts 
        return post.title.toLowerCase().includes(e.target.value.toLowerCase()) 
    }) 
    setstate({ 
        query: e.target.value, 
        list: results 
    }) 
} 

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

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

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

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

export default function App() { 
// state and handleChange() function 
   return ( 
    <div> 
        <form> 
          <input onChange={handleChange} value={state.query} type="search"/> 
        </form> 
        <ul> 
          {(state.query === '' ? "" : state.list.map(post => { 
            return <li key={post.title}>{post.title}</li> 
          }))} 
        </ul> 
    </div> 
  ) 
} 

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

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

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

<ul> 
  {(state.query === '' ? "No posts match the query" : !state.list.length ? "Your query did not return any results" : state.list.map(post => { 
    return <li key={post.title}>{post.title}</li> 
  }))} 
</ul> 

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

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

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

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