প্রতিক্রিয়া দিয়ে টাইপ করার সময় অনুসন্ধানের ফলাফলগুলি কীভাবে ফিল্টার করবেন

অনুসন্ধান বারগুলি ব্যবহারকারীদের আপনার ওয়েবসাইটে তাদের যা প্রয়োজন তা খুঁজে পেতে সহায়তা করার একটি দুর্দান্ত উপায়৷ এগুলি বিশ্লেষণের জন্যও ভাল যদি আপনি আপনার দর্শকরা কী অনুসন্ধান করছেন তার উপর নজর রাখেন।

ক্রোমে কিভাবে পপ আপ ব্লকার নিষ্ক্রিয় করবেন

আপনি একটি অনুসন্ধান বার তৈরি করতে প্রতিক্রিয়া ব্যবহার করতে পারেন যা ব্যবহারকারীর প্রকার হিসাবে ডেটা ফিল্টার করে এবং প্রদর্শন করে। রিঅ্যাক্ট হুক এবং জাভাস্ক্রিপ্ট ম্যাপ এবং ফিল্টার অ্যারে পদ্ধতির সাথে, শেষ ফলাফল হল একটি প্রতিক্রিয়াশীল, কার্যকরী অনুসন্ধান বাক্স।

---

---

দিনের মেকইউজের ভিডিও

সার্চ বার তৈরি করা হচ্ছে

অনুসন্ধানটি ব্যবহারকারীর কাছ থেকে ইনপুট নেবে এবং ফিল্টারিং ফাংশনটি ট্রিগার করবে। তুমি পারবে প্রতিক্রিয়াতে ফর্ম তৈরি করতে ফর্মিকের মতো একটি লাইব্রেরি ব্যবহার করুন , কিন্তু আপনি স্ক্র্যাচ থেকে একটি অনুসন্ধান বার তৈরি করতে পারেন।

আপনার যদি একটি প্রতিক্রিয়া প্রকল্প না থাকে এবং এটি অনুসরণ করতে চান, তাহলে create-react-app কমান্ড ব্যবহার করে একটি তৈরি করুন।

npx create-react-app search-bar 

মধ্যে App.js ফাইল, ইনপুট ট্যাগ সহ ফর্ম উপাদান যোগ করুন:

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

আপনি ব্যবহার করা উচিত রাজ্য ব্যবহার করুন হুক প্রতিক্রিয়া এবং পরিবর্তন বিষয়ক ইনপুট নিয়ন্ত্রণ করতে ইভেন্ট। সুতরাং, 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> 
    ) 
  } 

প্রতিবার একজন ব্যবহারকারী ইনপুট উপাদানের ভিতরে কিছু টাইপ করে, হ্যান্ডেল পরিবর্তন রাষ্ট্র আপডেট করে।

---

---

ইনপুট পরিবর্তনের ডেটা ফিল্টার করা

অনুসন্ধান বার ব্যবহারকারীর প্রদান করা ক্যোয়ারী ব্যবহার করে একটি অনুসন্ধান ট্রিগার করা উচিত। এর মানে হল আপনার হ্যান্ডেল চেঞ্জ ফাংশনের ভিতরে ডেটা ফিল্টার করা উচিত। আপনার রাজ্যে ফিল্টার করা ডেটার ট্র্যাকও রাখা উচিত।

প্রথমত, ডেটা অন্তর্ভুক্ত করতে রাজ্যটি সংশোধন করুন:

---

---

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 
    }) 
} 

প্রশ্নটি খালি থাকলে ফাংশনটি তাদের মাধ্যমে অনুসন্ধান না করেই পোস্টগুলি ফেরত দেয়। যদি একজন ব্যবহারকারী একটি ক্যোয়ারী টাইপ করে থাকেন, তাহলে পোস্টের শিরোনামে ক্যোয়ারী টেক্সট রয়েছে কিনা তা পরীক্ষা করে। পোস্টের শিরোনাম এবং ক্যোয়ারীকে ছোট হাতের অক্ষরে রূপান্তর করা নিশ্চিত করে যে তুলনাটি কেস-সংবেদনশীল।

একবার ফিল্টার পদ্ধতি ফলাফল প্রদান করে, হ্যান্ডেল চেঞ্জ ফাংশন ক্যোয়ারী টেক্সট এবং ফিল্টার করা ডেটা সহ অবস্থা আপডেট করে।

অনুসন্ধান ফলাফল প্রদর্শন করা হচ্ছে

অনুসন্ধানের ফলাফলগুলি প্রদর্শনের সাথে লিস্ট অ্যারে ব্যবহার করে লুপ করা জড়িত মানচিত্র পদ্ধতি এবং প্রতিটি আইটেমের জন্য ডেটা প্রদর্শন করা।

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> 

এই বার্তাটি যুক্ত করা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে কারণ ব্যবহারকারীকে ফাঁকা স্থানের দিকে তাকানো থাকে না।

একাধিকবার অনুসন্ধান পরামিতি পরিচালনা করা

আপনি একটি কাস্টম অনুসন্ধান উপাদান তৈরি করতে জাভাস্ক্রিপ্ট ইভেন্টগুলির সাথে প্রতিক্রিয়া অবস্থা এবং হুকগুলি ব্যবহার করতে পারেন যা একটি ডেটা অ্যারে ফিল্টার করে৷

ফিল্টার ফাংশনটি কেবলমাত্র অ্যারের ভিতরে থাকা বস্তুগুলির মধ্যে একটি বৈশিষ্ট্য-শিরোনাম-এর সাথে মেলে কিনা তা পরীক্ষা করে। আপনি বস্তুর অন্যান্য বৈশিষ্ট্যের সাথে ক্যোয়ারী মেলাতে লজিক্যাল OR অপারেটর ব্যবহার করে অনুসন্ধান কার্যকারিতা উন্নত করতে পারেন।

আমার ম্যাকবুক এয়ারের বয়স কত?