نحوه فیلتر کردن نتایج جستجو هنگام تایپ با React

یک نوار جستجوی واکنش‌گرا می‌تواند استفاده از وب‌سایت یا برنامه شما را بسیار لذت‌بخش‌تر کند. همچنین این یک پروژه عالی برای یادگیری نحوه مدیریت وضعیت React است.

نوارهای جستجو راهی عالی برای کمک به کاربران برای یافتن آنچه در وب سایت شما نیاز دارند هستند. آنها همچنین برای تجزیه و تحلیل خوب هستند اگر آنچه را که بازدیدکنندگان جستجو می کنند را پیگیری کنید.

می‌توانید از React برای ایجاد یک نوار جستجو استفاده کنید که داده‌ها را به‌عنوان تایپ کاربر فیلتر و نمایش می‌دهد. با قلاب‌های React و نقشه جاوا اسکریپت و روش‌های آرایه فیلتر، نتیجه نهایی یک کادر جستجوی پاسخگو و کاربردی است.

ایجاد نوار جستجو

جستجو ورودی کاربر را می گیرد و عملکرد فیلتر را فعال می کند. شما می توانید از کتابخانه ای مانند Formik برای ایجاد فرم ها در 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>
  )
}

برای کنترل ورودی باید از قلاب useStateReact و رویداد onChange استفاده کنید. بنابراین، useState را وارد کنید و ورودی را برای استفاده از مقدار state تغییر دهید:

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 state و hookها، همراه با رویدادهای جاوا اسکریپت، برای ایجاد یک عنصر جستجوی سفارشی که یک آرایه داده را فیلتر می‌کند، استفاده کنید.

تابع فیلتر فقط بررسی می کند که آیا پرس و جو با یک ویژگی – عنوان – در اشیاء داخل آرایه مطابقت دارد یا خیر. می‌توانید عملکرد جستجو را با استفاده از عملگر منطقی OR برای تطبیق پرس و جو با سایر خصوصیات موجود در شی بهبود بخشید.

منبع مقاله