كيفية تصفية نتائج البحث أثناء الكتابة باستخدام React

تعد أشرطة البحث طريقة رائعة لمساعدة المستخدمين في العثور على ما يحتاجون إليه على موقع الويب الخاص بك. كما أنها جيدة للتحليلات إذا كنت تتبع ما يبحث عنه زوارك.

يمكنك استخدام React لإنشاء شريط بحث يقوم بتصفية البيانات وعرضها حسب أنواع المستخدمين. باستخدام React hooks وخريطة JavaScript وطرق مصفوفة التصفية ، تكون النتيجة النهائية مربع بحث متجاوب وعملي.

---

---

اجعل فيديو اليوم

إنشاء شريط البحث

سيأخذ البحث مدخلات من المستخدم ويطلق وظيفة التصفية. تستطيع استخدم مكتبة مثل Formik لإنشاء نماذج في React ، ولكن يمكنك أيضًا إنشاء شريط بحث من البداية.

إذا لم يكن لديك مشروع React وتريد المتابعة معه ، فأنشئ مشروعًا باستخدام الأمر create-reaction-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. يجب عليك أيضًا تتبع البيانات التي تمت تصفيتها في الحالة.

أولاً ، قم بتعديل الحالة لتشمل البيانات:

---

---

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 أو قاعدة بيانات.

ما هي بطاقة الرسومات الخاصة بي windows 10

بعد ذلك ، قم بتعديل وظيفة 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 والخطافات ، جنبًا إلى جنب مع أحداث JavaScript ، لإنشاء عنصر بحث مخصص يقوم بتصفية مصفوفة بيانات.

تتحقق وظيفة التصفية فقط مما إذا كان الاستعلام يطابق خاصية واحدة - العنوان - في الكائنات الموجودة داخل المصفوفة. يمكنك تحسين وظيفة البحث باستخدام عامل التشغيل المنطقي OR لمطابقة الاستعلام مع الخصائص الأخرى في الكائن.