অনেক সময় ওয়েবসাইতে মেনুতে, সাইটবারে কিংবা যেখানেই হোক না কেন অপশন এর সংখ্যা বেশি হয়ে গেলে প্রয়োজনীয় অপশনটি খুঁজে পাওয়া মুশকিল হয়ে যায়। এমন অবস্থায় যদি প্রয়োজনীয় অপশনটি সার্চ করে খুঁজে বের করা যেত তাহলে কেমন হতো? নিঃসন্দেহে ভালো, তাই নয় কি? আপনি হয়তো অনেক ওয়েবসাইটে এরকমটা দেখেও থাকবেন যেখানে ক্যাটাগরি কিংবা অন্য কোনো অপশন সহজেই সার্চ করে ফিল্টার করা যায়। আপনার সাইটেও যদি অপশনের সংখ্যা অনেক বেশি হয়ে যায় তাহলে আজকের পোস্ট ফলো করে আপনিও একটি ওপেন ফিল্টার সার্চ বার তৈরি করতে পারবেন। জ্বি হ্যাঁ, আজকের পোস্ট কিভাবে একটি অপশন ফিল্টার সার্চ বার তৈরি করা যায় সেই বিষয়ে বিস্তারিত আলোচনা করা হবে। তাহলে চলুন জাম্প করা যাক মূল পোস্টে।
একটি অপশন ফিল্টার সার্চ বার তৈরি করার জন্য মূল কাজ হলো জাভাস্ক্রিপ্টের। এছাড়াও HTML এর মধ্যে সার্চ বার যুক্ত করার জন্য অল্প একটু কাজ আছে এবং সার্চ বার ডিজাইন করার জন্য কিছু সিএসএস যুক্ত করতে হবে। সিএসএস দিয়ে সার্চ বার ডিজাইনের কাজটুকু আপনারা কোনো ঝামেলা ছাড়াই করতে পারবেন, আমি শুধু HTML এবং জাভাস্ক্রিপ্ট এর কাজটুকু দেখিয়ে দেব।
নিয়মানুসারে প্রথমেই এইচটিএমএল এর কাজ করা যাক। যেহেতু অপশনগুলো সার্চ করার জন্য একটি সার্চ বার থাকবে তাই প্রথমে সার্চ বারের জন্য নিচের এইচটিএমএল কোডটুকু কপি করে HTML ফাইলে যে প্যারেন্ট div এর মধ্যে অপশনগুলো আছে সেই div এর মধ্যে বাকি সব কোডের উপরে পেস্ট করে দিন। আর হ্যা অবশ্যই অপশন গুলোর প্যারেন্ট div এ একটি আইডি দিতে হবে, আপনার পছন্দমত যে কোনো আইডি দিতে পারেন।
<input type="text" placeholder="Search.." id="filterInput" onkeyup="filter()">HTML এর কাজ শেষে এবার মূল কাজ জাভাস্ক্রিপ্টের। জাভাস্ক্রিপ্টে আপনাকে বেশ কিছু পরিবর্তন করতে হবে। নিচের জাভাস্ক্রিপ্ট কোডের মধ্যে লক্ষ করুন এবং নিচে উল্লেখ করা বিষয়সমূহ পরিবর্তন করুন।
- যে লাইনে "Input field ID" কমেন্ট করে লেখা আছে সেই লাইনের কোটেশন এর মধ্যে সার্চ ইনপুট ট্যাগ এর আইডি দিয়ে হবে। আপনি যদি সরাসরি সার্চ বারের জন্য আমাদের দেওয়া কোড ইউজ করেন তাহলে এই লাইনে কোনো পরিবর্তন করা লাগবে না।
- যে লাইনে "optiins parent tag ID" কমেন্ট করে লেখা আছে সেই লাইনের কোটেশন এর মধ্যে অপশন গুলোর প্যারেন্ড ট্যাগ হিসেবে যে div ব্যবহার করা হয়েছে সেটার আইডি দিতে হবে।
- যে লাইনে "optiin tag name" কমেন্ট করে লেখা আছে সেই লাইনের কোটেশন এর মধ্যে অপশন গুলোতে যে ট্যাগ ব্যবহার করা হয়েছে সেই ট্যাগ এর নাম দিতে হবে। যেহেতু বেশিরভাগ ক্ষেত্রে অপশন গুলোতে হাইপারলিংক দেওয়া হয় তাই ডিফল্ট ভাবে "a" ট্যাগ দেওয়া আছে।
function filter() {
var input = document.getElementById("filterInput"); //Input field ID
var options = document.getElementById("options"); //optiins parent tag ID
var option = options.getElementsByTagName("a"); //optiin tag name
var filter = input.value.toUpperCase();
for (i = 0; i < option.length; i++) {
var filterText = option[i].textContent || option[i].innerText;
if (filterText.toUpperCase().indexOf(filter) > -1) {
option[i].style.display = "";
} else {
option[i].style.display = "none";
}
}
}আমরা যে ডিফল্ট জাভাস্ক্রিপ্ট কোড দিয়েছি সে অনুযায়ী কমপ্লিট এইচটিএমএল নিচের মতো হবে।
<div id="options">
<input type="text" placeholder="Search.." id="filterInput" onkeyup="filter()">
<a href="#">Google</a>
<a href="#">Facebook</a>
<a href="#">WhatsApp</a>
<a href="#">Instagram</a>
<a href="#">Twitter</a>
<a href="#">Youtube</a>
<a href="#">Netflix</a>
<a href="#">Yahoo</a>
</div>Download Project
তো পোস্ট মূলত শেষ। আশা করি বুঝে গেছেন। যাদের বুঝতে সমস্যা হয়েছে তারা নিচের লিংক থেকে সম্পূর্ন প্রজেক্ট ডাউনলোড করে কোডগুলো মনোযোগ দিয়ে দেখুন। আশা করি ১০০% বুঝে যাবেন, ধন্যবাদ।