ডাইনামিক সার্চ এবং ফিল্টারিং ইউআই তৈরি

Aurelia ফ্রেমওয়ার্কের মাধ্যমে আপনি সহজেই একটি ডাইনামিক সার্চ এবং ফিল্টারিং UI তৈরি করতে পারেন। এতে ইউজাররা তাদের প্রয়োজনীয় ডেটা সহজেই খুঁজে বের করতে পারে এবং ফিল্টার করতে পারে। এটি সাধারণত একটি ইনপুট ফিল্ড বা চেকবক্সের মাধ্যমে হয়, যেখানে ইউজার যেকোনো নির্দিষ্ট মান অনুসারে ডেটা ফিল্টার করতে পারে।

এখানে আমরা একটি ডাইনামিক সার্চ এবং ফিল্টারিং UI তৈরি করার প্রক্রিয়া দেখবো, যেখানে ডেটা একটি তালিকা বা অ্যারে হিসেবে থাকবে এবং ইউজার তার ইনপুটের মাধ্যমে ডেটা সার্চ এবং ফিল্টার করতে পারবে।

১. ডাইনামিক সার্চ এবং ফিল্টারিং UI তৈরি করা

আমরা একটি তালিকাভুক্ত পণ্যের ডেটা ব্যবহার করবো এবং ইউজারদের একটি সার্চ ফিল্ডের মাধ্যমে তা ফিল্টার করার সুযোগ দেবো।

Step 1: ডেটা তৈরি করা

প্রথমে, আমরা একটি পণ্যের তালিকা তৈরি করবো যা ইউজার সার্চ বা ফিল্টার করতে পারবে।

export class App {
  constructor() {
    this.products = [
      { name: 'Laptop', category: 'Electronics', price: 1000 },
      { name: 'Smartphone', category: 'Electronics', price: 500 },
      { name: 'Shirt', category: 'Clothing', price: 30 },
      { name: 'Washing Machine', category: 'Home Appliances', price: 250 },
      { name: 'Jacket', category: 'Clothing', price: 60 },
      { name: 'Microwave', category: 'Home Appliances', price: 120 }
    ];
    
    this.searchText = ''; // সার্চ টেক্সট
    this.filteredProducts = this.products; // ফিল্টার করা পণ্য
  }

  // সার্চ ফিল্টারিং ফাংশন
  filterProducts() {
    this.filteredProducts = this.products.filter(product => 
      product.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
      product.category.toLowerCase().includes(this.searchText.toLowerCase())
    );
  }
}

এখানে:

• products অ্যারে আমাদের পণ্যের তালিকা ধারণ করে।
• searchText হল ইউজারের ইনপুট যা দ্বারা পণ্যগুলি সার্চ করা হবে।
• filterProducts ফাংশনটি পণ্যগুলিকে সার্চ টেক্সট অনুযায়ী ফিল্টার করে।

Step 2: HTML টেমপ্লেট তৈরি করা

এখন, আমাদের HTML টেমপ্লেটে একটি ইনপুট ফিল্ড এবং একটি তালিকা তৈরি করতে হবে যেখানে ফিল্টার করা পণ্যগুলি প্রদর্শিত হবে।

<template>
  <h2>Product Search</h2>
  
  <!-- সার্চ ইনপুট -->
  <input type="text" value.bind="searchText" input.trigger="filterProducts()" placeholder="Search products..." />

  <ul>
    <li repeat.for="product of filteredProducts">
      ${product.name} - ${product.category} - $${product.price}
    
  

এখানে:
input.trigger="filterProducts()": ইনপুট ফিল্ডে ইউজার যখন কিছু টাইপ করবে, তখন filterProducts() ফাংশনটি কল হবে এবং পণ্যগুলি ফিল্টার হবে।
repeat.for="product of filteredProducts": এখানে পণ্যগুলিকে ফিল্টার করা তালিকা (filteredProducts) থেকে পুনরাবৃত্তি (loop) করা হবে।
২. ফিল্টারিং এবং সার্চ কার্যকারিতা
উপরে আমরা যা তৈরি করেছি, তা হল একটি সাধারণ ডাইনামিক সার্চ UI, যেখানে ইউজার ইনপুট দেয় এবং সেটি পণ্যগুলিকে ফিল্টার করে। যখন ইউজার ইনপুট ফিল্ডে কিছু টাইপ করবে, তখন পণ্য তালিকা ফিল্টার হয়ে যাবে এবং ইউজার সহজেই তার প্রয়োজনীয় পণ্যটি খুঁজে পাবে।
এগিয়ে যাওয়া - ক্যাটাগরি ফিল্টারিং
আমরা আরও একটি ফিল্টার যোগ করতে পারি, যেমন ক্যাটাগরি ফিল্টার, যা ইউজারকে নির্দিষ্ট একটি ক্যাটাগরি অনুযায়ী পণ্য ফিল্টার করতে সাহায্য করবে। এটি একটি চেকবক্স বা ড্রপডাউন সিলেক্টর দিয়ে করা যেতে পারে।
Step 3: ক্যাটাগরি ফিল্টার যুক্ত করা
export class App {
  constructor() {
    this.products = [
      { name: 'Laptop', category: 'Electronics', price: 1000 },
      { name: 'Smartphone', category: 'Electronics', price: 500 },
      { name: 'Shirt', category: 'Clothing', price: 30 },
      { name: 'Washing Machine', category: 'Home Appliances', price: 250 },
      { name: 'Jacket', category: 'Clothing', price: 60 },
      { name: 'Microwave', category: 'Home Appliances', price: 120 }
    ];
    
    this.searchText = '';
    this.selectedCategory = '';  // ক্যাটাগরি ফিল্টার
    this.filteredProducts = this.products;
  }

  filterProducts() {
    this.filteredProducts = this.products.filter(product => 
      (product.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
      product.category.toLowerCase().includes(this.searchText.toLowerCase())) &&
      (!this.selectedCategory || product.category === this.selectedCategory)
    );
  }
}
HTML (ক্যাটাগরি ফিল্টার সহ):
{product.price}
    </li>
  </ul>
</template>

এখানে:

• selectedCategory ইউজারের সিলেক্ট করা ক্যাটাগরি ধারণ করে।
• change.trigger="filterProducts()": যখন ক্যাটাগরি পরিবর্তন হবে, তখন filterProducts() কল হবে।

এভাবে, ইউজাররা সার্চ টেক্সট এবং ক্যাটাগরি ফিল্টার দিয়ে পণ্যগুলিকে সহজে ফিল্টার করতে পারবে।

৩. ফিল্টারিং এবং সার্চের উন্নত কার্যকারিতা

আপনি আরও উন্নত ফিল্টারিং ব্যবস্থা তৈরি করতে পারেন, যেমন দাম ফিল্টার, রেটিং ফিল্টার বা অন্যান্য প্যারামিটার ফিল্টার। সমস্ত ফিল্টার একসঙ্গে ব্যবহার করে আপনি একটি শক্তিশালী এবং ডাইনামিক সার্চ সিস্টেম তৈরি করতে পারেন।

উপসংহার

Aurelia দিয়ে ডাইনামিক সার্চ এবং ফিল্টারিং UI তৈরি করা একটি সহজ প্রক্রিয়া। আপনি data binding এবং event handling ব্যবহার করে ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করতে পারেন। উদাহরণ হিসেবে আমরা পণ্যের তালিকা ফিল্টার এবং সার্চ করার ব্যবস্থা দেখলাম, যেখানে ইউজার ইনপুটের মাধ্যমে পণ্যগুলি ফিল্টার করা হয়। আপনি এই কনসেপ্ট ব্যবহার করে আরও উন্নত এবং ইন্টারেক্টিভ সার্চ এবং ফিল্টারিং সিস্টেম তৈরি করতে পারবেন।