jQueryUI Autocomplete উইজেট একটি শক্তিশালী ফিচার যা ব্যবহারকারীদের তাদের ইনপুটের ভিত্তিতে সাজেস্টেড ডেটা দেখাতে সাহায্য করে। এটি সাধারণত সার্চ বক্সে ব্যবহৃত হয়, যেখানে ব্যবহারকারী কিছু টাইপ করার সাথে সাথে একটি তালিকা বা সাজেস্টন প্রদর্শিত হয়। AJAX এর সাথে ইন্টিগ্রেট করার মাধ্যমে, আপনি সার্ভার থেকে ডাইনামিক ডেটা লোড করতে পারেন এবং তা সরাসরি Autocomplete উইজেটে প্রদর্শন করতে পারেন, যা ব্যবহারকারীদের জন্য দ্রুত এবং স্মুথ সার্চ এক্সপেরিয়েন্স তৈরি করে।
Autocomplete উইজেট কী?
jQueryUI Autocomplete উইজেট ব্যবহারকারীকে একটি ইনপুট বক্সের মধ্যে ডাইনামিক সাজেস্টড ডেটা প্রদর্শন করে, যখন সে কিছু টাইপ করতে শুরু করে। এটি খুবই কার্যকরী যখন আপনি একটি লম্বা ডেটাবেস থেকে দ্রুত ফলাফল দেখতে চান।
Autocomplete উইজেটের বেসিক সিনট্যাক্স
$(document).ready(function() {
$("#search").autocomplete({
source: ["Apple", "Banana", "Cherry", "Date", "Fig", "Grape", "Honeydew"]
});
});
এখানে, source প্যারামিটার একটি স্ট্যাটিক অ্যারে ব্যবহার করা হয়েছে, কিন্তু AJAX এর সাথে ইন্টিগ্রেট করলে সার্ভার থেকে ডেটা লোড করা যাবে।
jQueryUI Autocomplete এবং AJAX ইন্টিগ্রেশন
আপনি AJAX ব্যবহার করে Autocomplete উইজেটের source প্যারামিটারটি ডাইনামিকভাবে সার্ভার থেকে ডেটা লোড করতে ব্যবহার করতে পারেন। নিচে দেখানো হলো কিভাবে আপনি AJAX এবং Autocomplete উইজেট একত্রে ব্যবহার করতে পারেন।
১. AJAX দিয়ে Autocomplete উইজেট কনফিগার করা
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autocomplete with AJAX</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
</head>
<body>
<label for="search">Search Fruits:</label>
<input id="search" type="text">
<script>
$(document).ready(function() {
$("#search").autocomplete({
source: function(request, response) {
$.ajax({
url: "search.php", // আপনার সার্ভারের PHP ফাইল বা API URL
type: "GET",
dataType: "json", // সার্ভার থেকে JSON ডাটা আসবে
data: {
query: request.term // ইউজারের ইনপুট সার্ভারে পাঠানো হবে
},
success: function(data) {
response(data); // সার্ভার থেকে প্রাপ্ত ডাটা Autocomplete-এ প্রদর্শিত হবে
},
error: function() {
alert("Error fetching data");
}
});
},
minLength: 2 // কমপক্ষে ২ অক্ষর টাইপ করার পর সাজেস্ট শুরু হবে
});
});
</script>
</body>
</html>
এখানে, source প্যারামিটারটি AJAX কলের মাধ্যমে কনফিগার করা হয়েছে। request.term ইউজারের ইনপুট পাঠায় এবং সার্ভার থেকে সাজেস্টড ডেটা response() ফাংশনের মাধ্যমে Autocomplete-এ প্রদর্শিত হয়।
২. PHP বা সার্ভার সাইড স্ক্রিপ্ট তৈরি করা
এখন, সার্ভার সাইডে একটি PHP স্ক্রিপ্ট তৈরি করতে হবে যা AJAX কলের মাধ্যমে ডেটা ফিরিয়ে দেবে। এই স্ক্রিপ্টে আমরা ইউজারের ইনপুটের সাথে মিলে এমন ফলাফলগুলি ডেটাবেস থেকে পাব এবং JSON ফরম্যাটে ফেরত দেব।
উদাহরণ: search.php
<?php
// ডেটাবেস কানেকশন (এটি আপনার ডেটাবেস কনফিগারেশন অনুসারে পরিবর্তন করুন)
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "fruitsdb";
$conn = new mysqli($servername, $username, $password, $dbname);
// চেক করুন যদি কানেকশন সফল হয়
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// ইউজারের ইনপুট (query) গ্রহণ
$query = $_GET['query'];
// ডেটাবেস থেকে ফলাফল খুঁজুন
$sql = "SELECT name FROM fruits WHERE name LIKE ? LIMIT 10";
$stmt = $conn->prepare($sql);
$searchTerm = "%" . $query . "%";
$stmt->bind_param("s", $searchTerm);
$stmt->execute();
$result = $stmt->get_result();
// ফলাফলগুলিকে একটি অ্যারে হিসাবে ফিরিয়ে দিন
$fruits = [];
while ($row = $result->fetch_assoc()) {
$fruits[] = $row['name'];
}
// JSON ফরম্যাটে রেসপন্স পাঠান
echo json_encode($fruits);
// ডেটাবেস কানেকশন বন্ধ করুন
$conn->close();
?>
এখানে, PHP স্ক্রিপ্টে আমরা LIKE কুয়েরি ব্যবহার করে fruits টেবিল থেকে ইউজারের ইনপুটের সাথে মিল পাওয়া ফলের নাম খুঁজছি এবং সেগুলিকে JSON ফরম্যাটে ফেরত পাঠাচ্ছি।
৩. Autocomplete এর সাথে Advanced Features
AJAX Autocomplete-এ কিছু অতিরিক্ত ফিচার যোগ করা যেতে পারে যেমন:
- minLength: ইউজারের ইনপুটের গুণগত মান নির্ধারণ করে, যেমন কমপক্ষে ২টি অক্ষর টাইপ করতে হবে।
- delay: ইউজার টিপস দেওয়ার পর কিছু সময়ের জন্য অপেক্ষা করতে পারেন।
- select: একটি সাজেস্টন সিলেক্ট করা হলে, একটি কাস্টম কার্য সম্পাদন করতে পারেন।
উদাহরণ: select event ব্যবহার করা
$(document).ready(function() {
$("#search").autocomplete({
source: function(request, response) {
$.ajax({
url: "search.php",
type: "GET",
dataType: "json",
data: { query: request.term },
success: function(data) {
response(data);
}
});
},
select: function(event, ui) {
alert("You selected: " + ui.item.value); // সিলেক্ট করা আইটেমের নাম প্রদর্শন
},
minLength: 2
});
});
এখানে, select ইভেন্ট ব্যবহার করে, যখন ইউজার একটি সাজেস্টন সিলেক্ট করবেন তখন সিলেক্ট করা আইটেমের নাম একটি এলার্টে দেখানো হবে।
উপসংহার
jQueryUI Autocomplete উইজেট এবং AJAX ইন্টিগ্রেশন ওয়েব পেজে ডাইনামিক এবং ইন্টারঅ্যাকটিভ সার্চ ফিচার তৈরি করতে সহায়তা করে। এটি ব্যবহারকারীদের ইনপুটের ভিত্তিতে সরাসরি সার্ভার থেকে সাজেস্টড ডেটা লোড এবং প্রদর্শন করতে দেয়। এই ফিচারটি ওয়েব পেজের পারফরম্যান্স এবং ইউজার এক্সপেরিয়েন্সে উন্নতি এনে দেয়, কারণ ব্যবহারকারীরা দ্রুত এবং দক্ষতার সাথে তথ্য খুঁজে পেতে পারেন।
Read more
