Autocomplete উইজেট jQueryUI এর একটি গুরুত্বপূর্ণ ফিচার যা ব্যবহারকারীদের জন্য একটি সহজ এবং দ্রুত অনুসন্ধান অভিজ্ঞতা তৈরি করে। এটি ইনপুট ফিল্ডে ব্যবহারকারীর টাইপ করা শব্দের উপর ভিত্তি করে প্রাসঙ্গিক সাজেস্টেশন দেখায়। এই উইজেটটি সাধারণত সার্চ বক্স বা অনুসন্ধান বার তৈরির জন্য ব্যবহৃত হয়।
এখানে আমরা দেখাবো কিভাবে jQueryUI Autocomplete উইজেট ব্যবহার করে একটি স্বয়ংক্রিয় অনুসন্ধান বার তৈরি করা যায়।
১. HTML ফাইল তৈরি করা
প্রথমে একটি HTML ফাইল তৈরি করুন যেখানে আপনি অনুসন্ধান বার তৈরি করবেন। নিচে একটি উদাহরণ দেখানো হলো:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autocomplete উদাহরণ</title>
<!-- jQuery লোড -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQueryUI CSS লোড -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- jQueryUI JavaScript লোড -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<label for="search">অনুসন্ধান করুন:</label>
<input type="text" id="search" placeholder="প্রোডাক্ট নাম লিখুন">
<script>
// jQueryUI Autocomplete উইজেট ব্যবহার করা
$(document).ready(function() {
var availableTags = [
"Apple", "Banana", "Cherry", "Date", "Grape",
"Kiwi", "Lemon", "Mango", "Orange", "Papaya",
"Pineapple", "Strawberry", "Watermelon"
];
$("#search").autocomplete({
source: availableTags // ডেটার উৎস
});
});
</script>
</body>
</html>
২. কোডের ব্যাখ্যা
- jQuery এবং jQueryUI লোড করা: প্রথমে আমরা jQuery এবং jQueryUI এর CSS ও JavaScript ফাইল লোড করেছি, যা Autocomplete উইজেট ব্যবহার করতে সাহায্য করবে।
- HTML ইনপুট ফিল্ড:
#searchনামক একটি ইনপুট ফিল্ড তৈরি করা হয়েছে যেখানে ব্যবহারকারী তাদের অনুসন্ধান শব্দটি টাইপ করবেন। - Autocomplete উইজেটের জন্য স্ক্রিপ্ট:
- আমরা একটি availableTags নামক অ্যারে তৈরি করেছি, যেখানে বিভিন্ন ফলের নাম রয়েছে। আপনি এই অ্যারে-টি নিজের প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন (যেমন ডাটাবেস থেকে ডেটা ফেচ করা বা অন্য কোনো সূত্র থেকে ডেটা নেয়া)।
$("#search").autocomplete()ফাংশনটি ইনপুট ফিল্ডে Autocomplete উইজেটটি প্রয়োগ করবে। এখানেsourceপ্রপার্টি দিয়ে আমরা সেই ডেটার উৎস উল্লেখ করেছি, যা প্রদর্শিত হবে যখন ব্যবহারকারী ইনপুট ফিল্ডে কিছু লিখবে।
৩. Autocomplete কাস্টমাইজেশন
autocomplete() ফাংশনের মাধ্যমে আপনি বেশ কিছু কাস্টমাইজেশন করতে পারেন। নিচে কিছু কাস্টম অপশন দেখানো হলো:
minLength: এই অপশনটি দিয়ে আপনি সেট করতে পারেন, কতটা কিরকম টাইপ করার পর সাজেস্টশন দেখানো শুরু হবে।
minLength: 3 // তিনটি অক্ষর টাইপ করার পর সাজেস্টশন দেখাবেselect: এটি ব্যবহারকারী যদি একটি সাজেস্টেশন সিলেক্ট করেন, তাহলে কোনো নির্দিষ্ট কাজ করতে পারবেন। উদাহরণস্বরূপ:
select: function(event, ui) { alert("আপনি নির্বাচিত করেছেন: " + ui.item.value); }source from a server: আপনি যদি একটি রিমোট সার্ভার থেকে ডেটা চান, তাহলে AJAX কল ব্যবহার করে ডেটা পাঠাতে পারেন:
source: function(request, response) { $.ajax({ url: "search.php", dataType: "json", data: { term: request.term }, success: function(data) { response(data); // সার্ভার থেকে প্রাপ্ত ডেটা } }); }
৪. ব্যবহারকারী ইন্টারফেস
এই কোডটি চালানোর পর, যখন ব্যবহারকারী অনুসন্ধান বারে কিছু টাইপ করবেন, তখন পূর্বনির্ধারিত ডেটা থেকে সাজেস্টশনগুলি দেখানো হবে। ব্যবহারকারী যদি কোনো সাজেস্টশন সিলেক্ট করেন, তাহলে সেটি ইনপুট ফিল্ডে প্রদর্শিত হবে।
উপসংহার
jQueryUI Autocomplete উইজেট ব্যবহার করে আপনি একটি খুব সহজ ও কার্যকরী অনুসন্ধান বার তৈরি করতে পারেন। এটি ব্যবহারকারীদের জন্য অনুসন্ধান প্রক্রিয়া দ্রুত এবং সঠিক করে তোলে। jQueryUI এর Autocomplete উইজেটটি সহজেই কাস্টমাইজ করা যায়, এবং এর মাধ্যমে আপনি রিমোট ডেটা ফেচিং এবং অন্যান্য উন্নত ফিচারও যুক্ত করতে পারেন।
Read more
