كيفية إضافة بحث إلى تطبيق React باستخدام Fuse.js

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

  • ما هو fuse.js؟
  • لماذا البحث مهم؟
  • ماذا سنبني؟
  • الخطوة 0: تمهيد تطبيقنا
  • الخطوة 1: تثبيت Fuse.js
  • الخطوة 2: إنشاء مثيل بحث Fuse جديد
  • الخطوة 3: إعداد البحث الديناميكي بناءً على مدخلات المستخدم

ما هو fuse.js؟

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

لماذا البحث مهم؟

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

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

ماذا سنبني؟

سنبدأ بمثال أساسي على تطبيق Create React. سيشمل بعض معلومات الشخصية كبيانات منظمة لأحد عروضي المفضلة Futurama التي تم إلقاؤها ببساطة في قائمة HTML.

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

الخطوة 0: تمهيد تطبيقنا

للبدء ، سنحتاج إلى محتوى للعمل معه. لقد بدأت ببناء قائمة من الشخصيات من Futurama كبيانات json منظمة وضعتها في قائمة مع تطبيق Create React الجديد.

ستلاحظ أيضًا أنني قمت بالفعل بإضافة إدخال لبحثنا. إنها ليست وظيفية بعد ولكننا سنستخدمها للبدء.

إذا كنت ترغب في البدء في نفس المكان ، فقد أنشأت فرعًا باستخدام الريبو التجريبي الخاص بي الذي يمكنك استنساخه محليًا للتجول في المشروع معي!

git clone --single-branch --branch start [email protected]:colbyfayock/my-futurama-characters.git 

فرع Git "بدء"

أو اتبع مع الالتزام.

الخطوة 1: تثبيت Fuse.js

أول شيء نريد القيام به هو إضافة Fuse.js إلى تطبيقنا. في مشروعك ، قم بتشغيل:

yarn add fuse.js # or npm install --save fuse.js 

سيوفر هذا الاعتماد على مشروعنا حتى نتمكن من استخدامه في مشروعنا.

بعد ذلك ، سنريد استيراد التبعية إلى تطبيقنا حتى نتمكن من البدء في البناء معه. في الجزء العلوي من الملف الخاص بك ، في حالتنا src/App.jsإذا كنت تتابع معي في مشروع Create React App الجديد ، أضف:

import Fuse from 'fuse.js'; 

إذا كنت ترغب في اختبار مدى نجاحها ، يمكنك console.log(Fuse)مشاهدة صفنا Fuseالذي سنستخدمه لإنشاء إمكانات البحث لدينا.

وبهذا نكون جاهزين للبدء!

اتبع مع الالتزام

الخطوة 2: إنشاء مثيل بحث Fuse جديد

لاستخدام Fuse.js ، سنحتاج أولاً إلى إنشاء مثيل جديد منه.

في الجزء العلوي من المكون الخاص بك ، أضف:

const fuse = new Fuse(characters, { keys: [ 'name', 'company', 'species' ] }); 

مع هذا يفعل:

  • يقوم بإنشاء مثيل جديد لـ Fuse
  • يمر في مجموعتنا charactersمن الكائنات
  • تحدد المفاتيح الثلاثة في بياناتنا التي نريد البحث عنها

بعد ذلك ، لإجراء البحث ، يمكننا إضافة:

const results = fuse.search('bender'); 

وإذا قمنا بالتحكم في تسجيل الخروج من النتائج ، فيمكننا رؤية:

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

للحصول على فكرة عن كيفية عمل ذلك ، دعنا نضيف includeScoreالخيار إلى بحثنا:

const fuse = new Fuse(characters, { keys: [ 'name', 'company', 'species' ], includeScore: true }); 

الآن يمكننا رؤية scoreالسمة في كائن النتائج.

ستلاحظ أن نتيجتنا الأولى كانت منخفضة حقًا. مع fuse.js ، تعني النتيجة الأقل أنها أقرب إلى التطابق التام.

تشير الدرجة 0 إلى تطابق كامل ، بينما تشير الدرجة 1 إلى عدم تطابق كامل.

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

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

const results = fuse.search('bender'); const characterResults = results.map(character => character.item); 

ما يفعله هذا هو إنشاء مصفوفة جديدة باستخدام طريقة الخريطة التي ستتضمن فقط itemالخاصية من كل كائن مصفوفة.

ثم إذا استبدلنا charactersخريطتنا داخل قائمتنا بـ characterResults.map:


   
    {characterResults.map(character => { const { name, company, species, thumb } = character;

يمكننا الآن أن نرى أن صفحتنا تظهر فقط نتائج "bender"!

اتبع جنبا إلى جنب مع الالتزام!

الخطوة 3: إعداد البحث الديناميكي بناءً على مدخلات المستخدم

الآن بعد أن أصبح لدينا بحث مشفر ، نريد أن يتمكن شخص ما بالفعل من استخدام مدخلات البحث للبحث!

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

أولاً ، قم باستيراد useStateالخطاف من React:

import React, { useState } from 'react'; 

بعد ذلك ، دعنا نستخدم هذا الخطاف لإنشاء مثيل حالة:

const [query, updateQuery] = useState(''); 

هنا ، نقوم بإنشاء حالة جديدة queryيمكننا تحديثها باستخدام updateQueryهذه الإعدادات الافتراضية إلى سلسلة فارغة ( '').

مع ذلك ، دعنا نقول لإدخال البحث الخاص بنا لاستخدام هذه queryالقيمة كما هي:

في هذه المرحلة ، لا ينبغي أن يكون هناك شيء مختلف ، لأننا نستخدم استعلامًا فارغًا.

الآن دعنا نضيف معالج حدث إلى مدخلاتنا يمكننا استخدامه لتحديث حالتنا:

وسنرغب في إنشاء هذه الوظيفة حتى نتمكن من استخدامها:

function onSearch({ currentTarget }) { updateQuery(currentTarget.value); } 

سيؤدي هذا إلى تحديث queryقيمة الإدخال في أي وقت يتغير فيه.

الآن بعد أن أصبح لدينا query  ما نريد البحث عنه ، يمكننا تحديث مثيل البحث الخاص بنا:

const results = fuse.search(query); 

والآن إذا أعدت تحميل الصفحة ، فستكون فارغة! ؟

هذا لأنه افتراضيًا ، يرى Fuse استعلامنا الفارغ ولا يطابقه بأي شيء. إذا بحثنا الآن عن شيء مثل slurms، يمكننا أن نرى بحثنا يتم تحديثه ديناميكيًا بالنتائج!

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

const characterResults = query ? results.map(character => character.item) : characters; 

ومع ذلك ، لدينا بحثنا الأساسي!

اتبع جنبا إلى جنب مع الالتزام!

ماذا أفعل بعد ذلك؟

ضبط البحث

يأتي Fuse.js بالعديد من الخيارات التي يمكنك استخدامها لضبط البحث بالطريقة التي تريدها. تريد فقط إظهار نتائج موثوقة؟ استخدم thresholdالخيار! هل تريد استفسارات حساسة لحالة الأحرف؟ استخدم isCaseSensitiveالخيار!

//fusejs.io/api/options.html

تعيين الاستعلام الافتراضي مع معلمات URL

في بعض الأحيان تريد أن يتمكن شخص ما من الارتباط بمجموعة معينة من النتائج. للقيام بذلك ، قد نرغب في إضافة معلمة URL جديدة مثل ?q=bender.

لإنجاز هذا العمل ، يمكنك الحصول على معلمة URL هذه باستخدام جافا سكريبت واستخدام هذه القيمة لتعيين حالتنا query.

انضم إلى المحادثة!

هل أردت يومًا إضافة بحث ديناميكي غامض إلى تطبيقreactjs ولكنك لم تعرف كيف؟ ؟

يرشدك هذا الدليل إلى كيفية استخدام Fuse.js لإضافة بحث قوي من جانب العميل إلى تطبيق React الخاص بك ⚛️

تحقق من ذلك!؟ // t.co/EMlvXaOCat

- كولبي فايوك (colbyfayock) 26 مايو 2020

تابعني لمزيد من Javascript و UX وأشياء أخرى مثيرة للاهتمام!

  • ؟ تابعني على تويتر
  • ؟ ️ اشترك في My Youtube
  • ✉️ اشترك في رسالتي الإخبارية