جلب بيانات من القاعدة بدون تحديث الصفحة

وعليكم السلام ورحمة الله وبركاته.

أولا يجب وضع كود الإستعلام المرفق في ملف php منفصل حتى يتم إرسال طلب البحث له و لنفرض أن إسم الملف هو search.php .

الآن يجب وضع كود javascript التالي في نفس الملف الموجود به كود html :

function showResult(str) {
  document.getElementById("livesearch").innerHTML = "";
  fetch(`search.php?q=${encodeURIComponent(str)}`)
    .then(response => response.text())
    .then(data => {
      document.getElementById("livesearch").innerHTML = data;
    })
    .catch(error => {
      console.error('Error:', error);  // التعامل مع الأخطاء إذا حدثت
    });
}

وهكذا قمنا بإنشاء الدالة showResult الذي يتم إستدعاءها عند الحدث keyup . ونقوم فيها أولا بتفريغ محتوى العنصر livesearch وبعد ذلك نرسل طلب البحث إلى الملف search.php و نقوم بوضع كلمة البحث في parameter يسمى q و بعد ذلك نستقبل ال data وهي البيانات التي تم إرجاعها من الخادم من ملف search.php و نضعها بداخل العنصر livesearch.

الآن في ملف search.php نستقبل الطلب كالتالي :

<?php

if (isset($_GET['q'])) {
  $SS_age = $conn->real_escape_string($_GET['q']);
  $qq = mysql_query("select * from `AA` where `BB` LIKE '%$SS_age%' ");
  
  if (mysql_num_rows($qq)) {
    // عرض النتائج
    while ($row = mysql_fetch_assoc($qq)) {
      echo "<div>" . $row['BB'] . "</div>";  // يمكنك تغير هذا السطر بناء على البيانات التي لديك
    }
  } else {
    echo "No results found";
  }
}

وهكذا سيتم إرسال البيانات إذا وجدت في قاعدة البيانات . ويمكنك تغير السطر بداخل حلقة while إلى الكود الذي تريده لبناء القائمة الخاصة بالنتائج