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

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

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

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

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

إذا لم يكن لديك مشروع React وتريد المتابعة معه ، فأنشئ مشروعًا باستخدام الأمر create-reaction-app.

npx يخلقرد فعل التطبيق يبحث-حاجِز

في ال App.js ملف ، أضف عنصر النموذج ، بما في ذلك علامة الإدخال:

يصدّرتقصيروظيفةبرنامج() {
يعود (
<شعبة>
<استمارة>
<نوع الإدخال ="يبحث"/>
</form>
</div>
 )
}

يجب عليك استخدام ملف useStateرد فعل هوك و ال على التغيير حدث للتحكم في المدخلات. لذلك ، قم باستيراد useState وتعديل المدخلات لاستخدام قيمة الحالة:

يستورد {useState} من "تتفاعل"
يصدّرتقصيروظيفةبرنامج() {
 const [query، setquery] = useState (





instagram viewer

'')
مقدار ثابت handleChange = (هـ) => {
سيتكويري(ه.هدف.قيمة)
 }
يعود (
<شعبة>
<استمارة>
<نوع الإدخال ="يبحث" القيمة = {استعلام} onChange = {handleChange} />
</form>
</div>
 )
 }

في كل مرة يكتب المستخدم شيئًا ما داخل عنصر الإدخال ، التعامل مع التغيير يقوم بتحديث الدولة.

تصفية البيانات عند تغيير المدخلات

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

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

مقدار ثابت [state، setstate] = useState ({
 استفسار: '',
قائمة: []
})

تجميع قيم الحالة مثل هذا ، بدلاً من إنشاء واحدة لكل قيمة ، يقلل من عدد العروض ، ويحسن الأداء.

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

مقدار ثابت المشاركات = [
 { 
 عنوان url: '',
 العلامات: ['تتفاعل', 'مدونة'],
 العنوان: "كيف يخلق رد فعل يبحث حاجِز'،
 },
 {
 عنوان url:'',
 العلامات: ['العقدة','يعبر'],
 عنوان: 'كيفية محاكاة بيانات API في Node.js',
 },
// المزيد من البيانات هنا
 ]

بامكانك ايضا جلب البيانات باستخدام API من CDN أو قاعدة بيانات.

بعد ذلك ، قم بتعديل وظيفة handleChange () لتصفية البيانات كلما كتب المستخدم داخل الإدخال.

مقدار ثابت handleChange = (هـ) => {
مقدار ثابت النتائج = posts.filter (النشر => {
 إذا (e.target.value "") إرجاع المشاركات
يعودبريد.عنوان.toLowerCase().يشمل(ه.هدف.قيمة.toLowerCase())
 })
 setstate ({
استفسار: ه.هدف.قيمة,
قائمة: نتائج
 })
}

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

بمجرد أن تُرجع طريقة التصفية النتائج ، تقوم وظيفة handleChange بتحديث الحالة بنص الاستعلام والبيانات التي تمت تصفيتها.

عرض نتائج البحث

يتضمن عرض نتائج البحث التكرار على مصفوفة القائمة باستخدام خريطة طريقة عرض البيانات لكل عنصر.

يصدّرتقصيروظيفةبرنامج() {
// حالة و handleChange () وظيفة
يعود (
<شعبة>
<استمارة>
<الإدخال عند التغيير = {handleChange} القيمة = {state.query} النوع ="يبحث"/>
</form>
<ماي>
 {(state.query ''? "": state.list.map (post => {
 يعود <مفتاح li = {post.title}>{post.title}</li>
 }))}
</ul>
</div>
 )
}

داخل علامة ul ، يتحقق المكون مما إذا كان الاستعلام فارغًا. إذا كان الأمر كذلك ، فإنه يعرض سلسلة فارغة لأنه يعني أن المستخدم لم يبحث عن أي شيء. إذا كنت تريد البحث في قائمة العناصر التي تعرضها بالفعل ، فقم بإزالة هذا الاختيار.

إذا لم يكن الاستعلام فارغًا ، فإن طريقة الخريطة تتكرر عبر نتائج البحث وتسرد عناوين المنشورات.

يمكنك أيضًا إضافة فحص يعرض رسالة مفيدة إذا لم يُرجع البحث أية نتائج.

<ماي>
 {(state.query ''? "لا توجد مشاركات تطابق الاستعلام":! state.list.length؟ "لم يأت استفسارك بأية نتائج": state.list.map (post => {
 يعود <مفتاح li = {post.title}>{post.title}</li>
 }))}
</ul>

تعمل إضافة هذه الرسالة على تحسين تجربة المستخدم لأن المستخدم لا يترك يبحث في مساحة فارغة.

التعامل مع معلمة البحث أكثر من مرة

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

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