জেকোয়েরি মোবাইল দিয়ে ফিল্টার লিস্ট তৈরি করে সার্চ ফিল্ড তৈরি
লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
আমরা কম্পিউটারে বা মোবাইলে সার্চ করার জন্য কোন কিছু লেখার সাথে সাথেই তা দেখিয়ে দেয় । এর কারণ হলো তাদের আগে থেকে সবকিছুর একটা লিস্ট তৈরি করে ফিল্টার করা থাকে তাই আমরা সার্চ করার সাথে সাথে খুঁজে পাই । আজ আমরা জেকোয়েরি মোবাইল দিয়ে এই ফিল্টার তৈরি করা শিখবো ।
ফিল্টার যোগ্য উপাদান সমূহঃ
যে সকল উপাদানের একটি সাব উপাদান লিস্ট বা বাচ্চা ক্যাটাগরি থাকে তাদের ফিল্টার লিস্ট তৈরি করা যাবে ।
কিভাবে একটি সার্চের জায়গা তৈরি করবো?
১। যে সকল উপাদান সমূহকে ফিল্টার করবো তাদের data-filter="true" এট্রিবিউট দ্বারা অবশ্যই অন্তর্ভূক্ত থাকতে হবে ।
২। একটি <input> উপাদান তৈরি করতে হবে এবং এর সাথে data-type="search" এট্রিবিঊট যোগ করতে হবে । এটা একটি সার্চের জায়গা তৈরি করবে । <input> কে একটি ফর্মের সাথে জড়াতে হবে এবং এই <form> element এর সাথে "ui-filterable" ক্লাস যোগ করতে হবে । এটা সার্চ ফিল্ড এবং সার্চের তথ্যের মাঝে একটা ভাগ দেখাবে ।
৩। তারপর data-input এট্রিবিউট কে ফিল্টারযোগ্য উপাদানের সাথে যোগ করতে হবে । এর ভেলু অবশ্যই <input> উপাদানের সাথে মিলতে হবে । তা না হলে কিন্তু সার্চ করা হলে কিছুই খুঁজে পাবে না ।
নিচে আমরা একটি উদাহরণ দেখাচ্ছিঃ
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter">
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
</ul>
আপনি এর জন্য একটা স্থান ধারক তৈরি করতে পারেন যেটা সার্চ ফিল্ডে কিছু সাজেশান হিসেবে দেখাতে পারে ।
উদাহরণ হিসেবে নিচের কোডটি দেখতে পারেনঃ
<input id="myFilter" data-type="search" placeholder="Search for names..">
নিজের মত করে ফিল্টার তৈরিঃ
চাইল্ড এলিমেন্টে যেটা থাকবে সুধু সার্চ রেজাল্টে সেটাই দেখাবে । কিন্তু আপনি চাইল্ড এলিমেন্টে data-filtertext এট্রিবিউট যোগ করে নিজের মত করে ফিল্টার তৈরি করতে পারবেন ।
কোডের উদাহরণঃ
<li data-filtertext="fav"><a href="#">Adele</a></li>
কিন্তু মনে রাখবেন আপনি যখন এমন ফিল্টার রেজাল্ট তৈরি করবেন সার্চ এর জন্য তখন আসল রেজাল্ট গুলো কিন্তু দেখাবে না, আপনার রেজাল্ট টায় প্রাধান্য পাবে ।
তাহলে দেখলেন তো কত সহজে আমরা একটা সার্চ ফিল্ড তৈরি করে ফেললাম । আসলেই খুব সহজ এবং অনেক মজার ।
